feat(gamepad-tester): add button images

_data/licenses.yml

@@ -0,0 +1,50 @@
+---
+gamepad-helper:
+  name: LizardByte/gamepad-helper
+  version: '2025.501.232754'
+  url: https://github.com/LizardByte/gamepad-helper/
+  license: MIT
+shared-web:
+  name: LizardByte/shared-web
+  version: '2025.326.11214'
+  url: https://github.com/LizardByte/shared-web/
+  license: AGPL-3.0
+beautiful-jekyll:
+  name: Beautiful Jekyll
+  url: https://github.com/daattali/beautiful-jekyll/
+  license: MIT
+bootstrap:
+  name: Bootstrap
+  url: https://getbootstrap.com/
+  license: MIT
+bundler:
+  name: Bundler
+  url: https://bundler.io/
+  license: MIT
+button-icons:
+  name: Button Icons and Controls
+  url: https://zacksly.itch.io/
+  license: CC BY 3.0
+chartjs:
+  name: Chart.js
+  version: '4.4.9'
+  url: https://www.chartjs.org/
+  license: MIT
+giscus:
+  name: Giscus
+  url: https://giscus.app/
+  license: MIT
+jekyll:
+  name: Jekyll
+  url: https://jekyllrb.com/
+  license: MIT
+jquery:
+  name: jQuery
+  version: '3.7.1'
+  url: https://jquery.com/
+  license: MIT
+marked:
+  name: Marked
+  version: '15.0.8'
+  url: https://marked.js.org/
+  license: MIT

_includes/footer-extra.html

@@ -3,3 +3,5 @@
 <a title="Privacy Policy" href="{{ '/privacy' | relative_url }}" class="text_muted">Privacy</a>
 &nbsp;&bull;&nbsp;
 <a title="Terms and Conditions" href="{{ '/terms' | relative_url }}" class="text_muted">Terms</a>
+&nbsp;&bull;&nbsp;
+<a title="Licenses and Attribution" href="{{ '/licenses' | relative_url }}" class="text_muted">Licenses</a>

_includes/license-entry.html

@@ -0,0 +1,12 @@
+<li class="list-group-item bg-dark text-white">
+    <div class="d-flex justify-content-between align-items-center">
+        <div>
+            <strong>{{ include.item.name }}</strong>
+            {% if include.item.version %}<span class="ms-2 badge bg-secondary">{{ include.item.version }}</span>{% endif %}
+            <small class="d-block text-muted">
+                <a href="{{ include.item.url }}" target="_blank" class="text-info">{{ include.item.url }}</a>
+            </small>
+        </div>
+        <span class="badge bg-primary">{{ include.item.license }}</span>
+    </div>
+</li>

_sass/circular-progress.scss

@@ -89,7 +89,7 @@
 
 .circular-button .button-value {
   font-size: 0.85rem;
-  line-height: 1;
+  line-height: 0.5;
 }
 
 .circular-button .progress-bar {
@@ -99,3 +99,18 @@
 .circular-button.active .button-content {
   box-shadow: 0 0 10px 3px rgba(13, 110, 253, 0.5);
 }
+
+.circular-button .button-image-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.circular-button .button-image {
+  max-width: 2.5rem;
+  max-height: 2.5rem;
+  width: auto;
+  height: auto;
+}

_sass/styles.scss

@@ -143,3 +143,19 @@ img.invert {
 table tr:nth-child(2n) {
   background-color: var(--footer-col);
 }
+
+.list-group-item.bg-dark {
+  border-color: var(--navbar-col);
+}
+
+.list-group-item.bg-dark .text-muted {
+  color: var(--text-col);
+}
+
+.list-group-item.bg-dark a {
+  text-decoration: none;
+}
+
+.list-group-item.bg-dark a:hover {
+  text-decoration: underline;
+}