slider work

website/assets/style.css

@@ -79,12 +79,12 @@ h6,
 
   font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro,
     sans-serif;
-  font-weight: 700;
+  font-weight: bold;
 }
 
 p a {
   color: #333;
-  font-weight: 700;
+  font-weight: bold;
   text-decoration: none;
   box-shadow: 0 1px 0 #adc2ee;
   transition: box-shadow 200ms ease 0s;
@@ -143,7 +143,7 @@ pre {
   max-width: 600px;
   margin: 0 auto 0.6em !important;
   overflow: scroll;
-  font-weight: 700;
+  font-weight: bold;
 }
 
 code {
@@ -259,39 +259,57 @@ hr {
 
 #support-plans-slider {
   max-width: 600px;
-  margin: 50px auto;
+  margin: 150px auto;
 }
 
-.plan-table {
-  max-width: 600px;
-  width: 100%;
-  margin: 20px auto 40px;
-  table-layout: fixed;
-  border-collapse: collapse;
+.noUi-value {
+  line-height: 0;
+  margin-top: 32px;
+  font-size: 20px;
+  transition: font-size 0.3s ease;
 }
 
-.plan-icon {
-  font-size: 30px;
+.noUi-value.active {
+  font-size: 40px;
+}
+
+.noUi-marker-horizontal.noUi-marker-large {
+  height: 5px;
+}
+.noUi-marker-horizontal.noUi-marker {
+  margin-left: 0;
+  width: 1px;
+}
+
+.noUi-tooltip {
+  border-color: #ccc;
+  border-radius: 10px;
+  padding: 10px;
 }
 
 .plan-name {
-  font-weight: 700;
+  font-weight: bold;
+  margin-bottom: 10px;
 }
 
-td {
-  padding: 10px;
-  border-bottom: 1px solid #ddd;
-  text-align: center;
+.plan-link {
+  display: block;
+  text-decoration: none;
+
+  color: white;
+  font-weight: bold;
+  letter-spacing: 0.05rem;
+  font-size: 15px;
+
+  border-radius: 20px;
+  padding: 6px 16px;
+  margin-top: 15px;
+
+  background: linear-gradient(32deg, #03a9f4, transparent) #f441a5;
+  transition: background-color 1s;
 }
 
-tr:nth-child(even) {
-  background-color: hsl(0, 0%, 98%);
-}
-
-/*tr:nth-child(odd) {*/
-/*  background-color: #ffffff;*/
-/*}*/
-
-tr:hover {
-  background-color: hsl(0, 0%, 96%);
+.plan-link:hover,
+.plan-link:focus {
+  background-color: #fdb900;
 }

website/assets/support_plans.js

@@ -0,0 +1,43 @@
+const pricingList = '__PRICING_JSON__'
+const pricingObj = Object.fromEntries(pricingList.map(item => [item.price, item]))
+const priceNumbers = pricingList.map(i => i.price)
+
+const slider = document.getElementById('support-plans-slider')
+
+const tooltipFormat = {
+  to: function (value) {
+    const price = pricingList[value]
+    const url = `https://support.openfreemap.org/checkout/buy/${price.lm_url}?media=0&desc=0&discount=0`
+    return `
+        <div class="plan-name">${price.name} Plan</div>
+        <div>$${price.price}/month</div>
+        <div>
+          <a class="plan-link" href="${url}">Subscribe</a>
+        </div>
+        `
+  },
+}
+
+const pipFormat = {
+  to: function (value) {
+    return pricingList[value].icon
+  },
+}
+
+const pricingSlider = noUiSlider.create(slider, {
+  start: 3,
+  range: { min: 0, max: priceNumbers.length - 1 },
+  step: 1,
+  tooltips: tooltipFormat,
+  pips: { mode: 'count', values: priceNumbers.length, format: pipFormat, density: -1 },
+})
+
+pricingSlider.on('update', function (values, _) {
+  for (const e of slider.querySelectorAll('.noUi-value')) {
+    e.classList.remove('active')
+  }
+
+  const value = parseInt(values[0])
+  const el = slider.querySelector('.noUi-value[data-value="' + value + '"]')
+  el.classList.add('active')
+})