custom2

v3/src/pages/pricing.astro

@@ -54,7 +54,7 @@ const metadata = {
     prices={[
       {
         title: 'Free',
-        subtitle: 'Free Self-hosting Plan',
+        subtitle: 'Free self-hosting plan',
         price: '0 <span class="text-sm">/month</span>',
         period: 'Open source and free',
         items: [
@@ -73,7 +73,7 @@ const metadata = {
       },
       {
         title: 'Individual',
-        subtitle: 'Individual Self-hosting Pro Plan',
+        subtitle: 'Individual self-hosting <span class="font-bold">Pro</span> plan',
         price: '9.90 <span class="text-sm">/month</span>',
         period: 'billed annually',
         items: [
@@ -127,7 +127,7 @@ const metadata = {
       },
       {
         title: 'Basic',
-        subtitle: 'Basic Self-hosting Pro Plan',
+        subtitle: 'Basic self-hosting <span class="font-bold">Pro</span> plan',
         price: '19.90 <span class="text-sm">/month</span>',
         period: 'billed annually',
         items: [
@@ -169,7 +169,7 @@ const metadata = {
       },
       {
         title: 'Customized',
-        subtitle: 'Customized Pro Plan',
+        subtitle: 'Customized <span class="font-bold">Pro</span> plan',
         price: '<span id="cprice">19.90</span> <span class="text-sm">/month</span>',
         period: 'billed annually',
         items: [
@@ -185,7 +185,7 @@ const metadata = {
           },
         ],
         content: `
-<form class="flex flex-col space-y-4 mx-3">
+<form class="flex flex-col space-y-3 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">
@@ -193,6 +193,7 @@ const metadata = {
   <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>
+<br>
 <script>
   var users = 10;
   var devices = 100;
@@ -239,6 +240,112 @@ const metadata = {
     ]}
   />
 
+  <Prices
+    prices={[
+      {
+        title: 'Customized V2',
+        subtitle: 'Customized <span class="font-bold">Pro</span> plan with limited concurrent connections',
+        price: '<span id="cprice2">19.90</span> <span class="text-sm">/month</span>',
+        period: 'billed annually',
+        items: [
+          {
+            description:
+              '<span class="font-bold">Everything in the basic self-hosting plan <span class="underline font-normal">but with limited concurrent connections, excessive managed devices won\'t be disabled</span></span>',
+            icon: 'tabler:checks',
+          },
+          {
+            description: 'Unlimited concurrent sessions (in tabs or seperate windows) per concurrent connection',
+          },
+          {
+            description: '$1 for each additional user',
+          },
+          {
+            description: '$0.1 for each additional device',
+          },
+          {
+            description: '$20 for each additional concurrent connection',
+          },
+        ],
+        id: 'custom2',
+        content: `
+<form class="flex flex-col space-y-3 mx-3">
+  <label for="users2" 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="users2" name="users2" value="10" min="10" max="500" step="10">
+  <input type="range" id="usersSlider2" class="slider" name="usersRange2" value="10" min="10" max="500" step="10">
+  <label for="devices2" 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="devices2" name="devices2" value="100" min="100" max="5000" step="100">
+  <input type="range" id="devicesSlider2" class="slider" name="devicesRange2" value="100" min="100" max="5000" step="100">
+  <label for="conns" class="text-left font-bold">Number of Concurrent Connections:</label>
+  <input class="bg-white text-black rounded-md border border-gray-300 py-1 px-2 w-24 h-10" type="number" id="conns" name="conns" value="1" min="1" max="50" step="1">
+  <input type="range" id="connsSlider" class="slider" name="connsRange" value="1" min="1" max="50" step="1">
+</form>
+<br>
+<script>
+ var users2 = 10;
+ var devices2 = 100;
+ var conns = 1;
+ function submit2() {
+   redirectUrl = "https://rustdesk.com/api/lic/stripe/checkout?type=Customized&users=" + users2 + "&devices=" + devices2 + "&conns=" + conns;
+   gotoBuy(redirectUrl);
+ }
+ function calculatePrice2() {
+   users2 = parseInt(document.getElementById("users2").value);
+   devices2 = parseInt(document.getElementById("devices2").value);
+   conns = parseInt(document.getElementById("conns").value);
+   if (!users2 || users2 < 10) users2 = 10;
+   if (devices2 < 100) devices2 = 100;
+   if (conns < 1) conns = 1;
+   var price =  19.9 + (users2 - 10) + (devices2 - 100) * 0.1 + (conns - 1) * 20;
+   document.getElementById("cprice2").innerText = price.toFixed(price >= 100 ? 1 : 2);
+ }
+
+ if (window.location.href.indexOf("custom2") > 0) {
+    document.getElementById("custom2").style.display = 'block';
+    setTimeout(function() { window.location = "#custom2"; }, 150);
+ } else {
+    document.getElementById("custom2").style.display = 'none';
+ }
+
+ document.getElementById("users2").oninput = function() {
+   document.getElementById("usersSlider2").value = this.value;
+   calculatePrice2();
+ }
+
+ document.getElementById("devices2").oninput = function() {
+   document.getElementById("devicesSlider2").value = this.value;
+   calculatePrice2();
+ }
+
+ document.getElementById("conns").oninput = function() {
+   document.getElementById("connsSlider").value = this.value;
+   calculatePrice2();
+ }
+
+ document.getElementById("usersSlider2").oninput = function() {
+   document.getElementById("users2").value = this.value;
+   calculatePrice2();
+ }                    
+ 
+ document.getElementById("devicesSlider2").oninput = function() {
+   document.getElementById("devices2").value = this.value;
+   calculatePrice2();
+ }
+
+ document.getElementById("connsSlider").oninput = function() {
+   document.getElementById("conns").value = this.value;
+   calculatePrice2();
+ }
+</script>
+`,
+        callToAction: {
+          text: 'Buy now',
+          onclick: 'submit2()',
+          variant: 'primary',
+        },
+      },
+    ]}
+  />
+
   <CallToAction
     actions={[
       {