diff --git a/website/assets/style.css b/website/assets/style.css index 2837a8d..bb02291 100644 --- a/website/assets/style.css +++ b/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; } diff --git a/website/assets/support_plans.js b/website/assets/support_plans.js index e69de29..9ab43e3 100644 --- a/website/assets/support_plans.js +++ b/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 ` +
${price.name} Plan
+
$${price.price}/month
+
+ Subscribe +
+ ` + }, +} + +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') +}) diff --git a/website/blocks/main.md b/website/blocks/main.md index a3078a4..b48204a 100644 --- a/website/blocks/main.md +++ b/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: diff --git a/website/blocks/support_plans.html b/website/blocks/support_plans.html index 45a25d7..92bf340 100644 --- a/website/blocks/support_plans.html +++ b/website/blocks/support_plans.html @@ -1,42 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🗡️Steel Plan$10 / month
🥘Copper Plan$20 / month
🛎️Bronze Plan$40 / month
🍴Silver Plan$75 / month
🏆Gold Plan$150 / month
💿Platinum Plan$250 / month
💍Sapphire Plan$500 / month
💎Diamond Plan$1000 / month
+
diff --git a/website/generate.py b/website/generate.py index 85d0495..414b9f6 100755 --- a/website/generate.py +++ b/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', diff --git a/website/template.html b/website/template.html index e66f11a..f06377a 100644 --- a/website/template.html +++ b/website/template.html @@ -4,7 +4,6 @@ OpenFreeMap - +