Doc: Add Joplin Cloud feature descriptions to Plans page

Assets/WebsiteAssets/css/site.css

@@ -667,6 +667,30 @@ footer .bottom-links-row p {
 	color: #0557ba;
 }
 
+.joplin-cloud-feature-list .feature-description {
+	max-width: 600px;
+    font-size: .8em;
+    color: #555555;
+	margin-top: 5px;
+}
+
+.joplin-cloud-feature-list .feature-title {
+	text-decoration: none;
+	color: #000000;
+	margin-left: 10px;
+    border: 2px solid black;
+    display: inline-block;
+    width: 20px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100px;
+    height: 20px;
+    font-weight: bold;
+    font-size: 0.8em;
+    opacity: 0.5;
+}
+
 /*****************************************************************
  WHAT'S NEW PAGE
 *****************************************************************/

Assets/WebsiteAssets/templates/main-new.mustache

@@ -86,11 +86,7 @@ https://github.com/laurent22/joplin/blob/dev/{{{sourceMarkdownFile}}}
 			{{> footer}}
 		</div>
 
-		<script
-			src="{{jsBaseUrl}}/bootstrap5.0.2.bundle.min.js"
-			rel="preload"
-			as="script"
-		></script>
+		<script src="{{jsBaseUrl}}/bootstrap5.0.2.bundle.min.js" rel="preload" as="script"></script>
 		<script src="{{{assetUrls.js.script}}}"></script>
 
 		{{> analytics}}

Assets/WebsiteAssets/templates/partials/plan.mustache

@@ -21,7 +21,7 @@
 		</div>
 
 		{{#featureLabelsOn}}
-			<p><i class="fas fa-check feature feature-on"></i>{{.}}</p>
+			<p><i class="fas fa-check feature feature-on"></i>{{title}}</p>
 		{{/featureLabelsOn}}
 
 		{{#featureLabelsOff}}

Assets/WebsiteAssets/templates/plans.mustache

@@ -5,6 +5,9 @@
 				<h1 translate class="text-center">
 					Joplin Cloud <span class="frame-bg frame-bg-yellow">plans</span>
 				</h1>
+
+				<button id="myButton">My button</button>
+
 				<p translate class="text-center sub-title">
 					<a href="https://joplincloud.com">Joplin Cloud</a> allows you to synchronise your notes across devices. It also lets you publish notes, and collaborate on notebooks with your friends, family or colleagues.
 				</p>
@@ -138,6 +141,14 @@
 			} else {
 				applyPeriod('yearly');
 			}
+
+			$('.feature-description').hide();
+
+			$('.feature-title').click((event) => {
+				event.preventDefault();
+				const featureId = event.currentTarget.getAttribute('data-id');
+				$('.feature-description-' + featureId).show();
+			});
 		});
 	</script>
 </div>