map_howto

website/assets/style.css

@@ -244,3 +244,38 @@ hr {
   max-width: 600px;
   margin: 50px auto;
 }
+
+.plan-table {
+  max-width: 600px;
+  width: 100%;
+  margin: 20px auto 40px;
+  table-layout: fixed;
+    border-collapse: collapse;
+
+}
+
+.plan-icon {
+  font-size: 30px;
+}
+
+.plan-name {
+  font-weight: 700;
+}
+
+td {
+  padding: 10px;
+  border-bottom: 1px solid #ddd;
+  text-align: center;
+}
+
+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%);
+}

website/blocks/main.md

@@ -8,7 +8,7 @@ It's truly **open-source**: everything, including the full production setup, is
 
 ## How can I use it?
 
-<!--map_docs-->
+<!--map_howto-->
 
 ## How can I donate or support this project?
 

website/blocks/map_howto.html

@@ -123,3 +123,5 @@
     </div>
   </div>
 </div>
+
+<div id="pricing"></div>

website/blocks/support_plans.html

@@ -0,0 +1,42 @@
+<table class="plan-table">
+  <tr>
+    <td class="plan-icon">🗡️</td>
+    <td class="plan-name">Steel Plan</td>
+    <td class="plan-price">$10 / month</td>
+  </tr>
+  <tr>
+    <td class="plan-icon">🥘</td>
+    <td class="plan-name">Copper Plan</td>
+    <td class="plan-price">$20 / month</td>
+  </tr>
+  <tr>
+    <td class="plan-icon">🛎️</td>
+    <td class="plan-name">Bronze Plan</td>
+    <td class="plan-price">$40 / month</td>
+  </tr>
+  <tr>
+    <td class="plan-icon">🍴</td>
+    <td class="plan-name">Silver Plan</td>
+    <td class="plan-price">$75 / month</td>
+  </tr>
+  <tr>
+    <td class="plan-icon">🏆</td>
+    <td class="plan-name">Gold Plan</td>
+    <td class="plan-price">$150 / month</td>
+  </tr>
+  <tr>
+    <td class="plan-icon">💿</td>
+    <td class="plan-name">Platinum Plan</td>
+    <td class="plan-price">$250 / month</td>
+  </tr>
+  <tr>
+    <td class="plan-icon">💍</td>
+    <td class="plan-name">Sapphire Plan</td>
+    <td class="plan-price">$500 / month</td>
+  </tr>
+  <tr>
+    <td class="plan-icon">💎</td>
+    <td class="plan-name">Diamond Plan</td>
+    <td class="plan-price">$1000 / month</td>
+  </tr>
+</table>

website/template.html

@@ -44,7 +44,7 @@
     <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
     <script src="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.js"></script>
 
-    <script src="map_docs.js"></script>
+    <script src="map_howto.js"></script>
     <script src="support_plans.js"></script>
 
     <script src="https://unpkg.com/prismjs@1.29.0/components/prism-core.min.js"></script>