Added "Thanks" clicker to supporters page

server.js

@@ -362,3 +362,9 @@ router.get('/chart', async (req, res) => {
 });
 
 
+
+router.get('/clicker', async (req, res) => {
+    let name = req.header('hx-trigger-name');
+    clicks++;
+    res.send(clicks.toString());
+});

views/sidebar.html

@@ -5,7 +5,7 @@
 			<a href="/account" class="list-group-item list-group-item-action d-flex align-items-center active">Accounts</a>
 			<a href="/settings" class="list-group-item list-group-item-action d-flex align-items-center">Settings</a>
 		</div>
-		<h4 class="subheader mt-4">Experience</h4>
+		<h4 class="subheader mt-4">Other</h4>
 		<div class="list-group list-group-transparent">
 			<a href="/supporters" class="list-group-item list-group-item-action">Supporters</a>
 		</div>

views/supporters.html

@@ -8,6 +8,7 @@
 		<!-- CSS files -->
 		<link href="/css/tabler.min.css" rel="stylesheet"/>
 		<link href="/css/demo.min.css" rel="stylesheet"/>
+		<script src="https://unpkg.com/htmx.org@1.9.10" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>
 		<style>
 			@import url('/fonts/inter.css');
 			:root {
@@ -45,11 +46,25 @@
 					
 								<div class="card-body">
 									<h2 class="mb-2">Supporters</h2>
-									<p class="text-muted mb-4">Awesome people below</p>
+									<p class="text-muted mb-4">[Click to Thank]</p>
 									<div class="row align-items-center">
 										<div class="col">
-											<div class="avatar bg-green-lt" data-demo-color="" title="Micheal M" style="margin-right: 5px;">mm</div>
-											<div class="avatar bg-cyan-lt" data-demo-color="" title="Peter D" style="margin-right: 5px;">pd</div>
+
+											<span type="button" class="avatar avatar-md bg-green-lt" hx-trigger="load, click" hx-get="/clicker" hx-target="#count" name="MM"  title="Micheal M" style="margin-right: 5px;">mm</span>
+
+											<span type="button" class="avatar avatar-md bg-cyan-lt" hx-trigger="load, click" hx-get="/clicker" hx-target="#count" name="PD" title="Peter D" style="margin-right: 5px;">pd</span>
+
+
+										</div>
+									</div>
+								</div>
+								<div class="card-body">
+									<p class="text-muted mb-4">Thanks counter:</p>
+									<div class="row align-items-center">
+										<div class="col">
+
+											<span class="avatar avatar-md bg-yellow-lt" id="count" style="margin-right: 5px;">0</span>
+
 										</div>
 									</div>
 								</div>