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')
+})

website/blocks/main.md

@@ -12,7 +12,7 @@ It's truly **open-source**: everything, including the full production setup, is
 
 ## How can I donate or support this project?
 
-If this project helps you save on your map hosting costs, please subscribe to one of our support plans.
+If this project helps you save on your map hosting costs, please subscribe to one of our support plans here:
 
 <!--support_plans-->
 

website/blocks/support_plans.html

@@ -1,42 +1 @@
-<table class="plan-table">
-  <tr>
-    <td class="plan-icon">🗡️</td>
-    <td class="plan-name"><a href="https://support.openfreemap.org/checkout/buy/a6f020b9-883b-49a8-8ebd-5cd377824b7d?media=0&desc=0&discount=0">Steel Plan</a></td>
-    <td class="plan-price"><strong>$10</strong> / month</td>
-  </tr>
-  <tr>
-    <td class="plan-icon">🥘</td>
-    <td class="plan-name">Copper Plan</td>
-    <td class="plan-price"><strong>$20</strong> / month</td>
-  </tr>
-  <tr>
-    <td class="plan-icon">🛎️</td>
-    <td class="plan-name">Bronze Plan</td>
-    <td class="plan-price"><strong>$40</strong> / month</td>
-  </tr>
-  <tr>
-    <td class="plan-icon">🍴</td>
-    <td class="plan-name">Silver Plan</td>
-    <td class="plan-price"><strong>$75</strong> / month</td>
-  </tr>
-  <tr>
-    <td class="plan-icon">🏆</td>
-    <td class="plan-name">Gold Plan</td>
-    <td class="plan-price"><strong>$150</strong> / month</td>
-  </tr>
-  <tr>
-    <td class="plan-icon">💿</td>
-    <td class="plan-name"><a href="https://support.openfreemap.org/checkout/buy/3a325b51-ca94-4906-95fb-26233a45fb59?media=0&desc=0&discount=0">Platinum Plan</a></td>
-    <td class="plan-price"><strong>$250</strong> / month</td>
-  </tr>
-  <tr>
-    <td class="plan-icon">💍</td>
-    <td class="plan-name">Sapphire Plan</td>
-    <td class="plan-price"><strong>$500</strong> / month</td>
-  </tr>
-  <tr>
-    <td class="plan-icon">💎</td>
-    <td class="plan-name">Diamond Plan</td>
-    <td class="plan-price"><strong>$1000</strong> / month</td>
-  </tr>
-</table>
+<div id="support-plans-slider"></div>

website/generate.py

@@ -1,4 +1,5 @@
 #!/usr/bin/env python
+import json
 import shutil
 from pathlib import Path
 
@@ -28,6 +29,13 @@ def generate():
 
     open(OUT_DIR / 'index.html', 'w').write(index_html)
 
+    pricing_json = json.load(open('assets/pricing.json'))
+    support_plans_js = open('assets/support_plans.js').read()
+    support_plans_js = support_plans_js.replace(
+        "'__PRICING_JSON__'", json.dumps(pricing_json, ensure_ascii=False)
+    )
+    open(OUT_DIR / 'support_plans.js', 'w').write(support_plans_js)
+
     make_static_page('privacy', 'Privacy Policy')
     make_static_page('tos', 'Terms of Services')
     copy_assets()
@@ -37,7 +45,6 @@ def copy_assets():
     for file in [
         'style.css',
         'map_howto.js',
-        'support_plans.js',
         'logo.jpg',
         'favicon.ico',
         'github.svg',

website/template.html

@@ -4,7 +4,6 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>OpenFreeMap</title>
-    <link rel="stylesheet" href="style.css" />
     <meta
       name="description"
       content="Open and free custom maps for your website and apps, based on OpenStreetMap."
@@ -20,6 +19,7 @@
     <link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
     <link href="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.css" rel="stylesheet" />
     <link href="https://unpkg.com/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="style.css" />
   </head>
 
   <body>