Added "Thanks" clicker to supporters page

This commit is contained in:
lllllllillllllillll 2024-02-04 01:19:16 -08:00
parent 8feb88a2a0
commit 883a65faae
3 changed files with 25 additions and 4 deletions

View File

@ -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());
});

View File

@ -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>

View File

@ -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>