Add UI polishing for the demo

This commit is contained in:
Sergio Giménez Antón 2025-02-26 18:44:50 +01:00
parent 448287248e
commit 01dbe005e4

View file

@ -4,12 +4,7 @@
<h5 class="card-title">{% trans 'Environmental Impact Details' %}</h5>
<hr />
<div class="row mb-3">
<div class="col-sm-4 text-muted fw-bold">
{% trans 'Carbon Saved' %}
</div>
<div class="col-sm-8">{{ impact.carbon_saved|default:'0.0' }} kg</div>
</div>
<h6 class="mt-3 text-primary">{% trans 'While device is being used' %}</h6>
<div class="row mb-3">
<div class="col-sm-4 text-muted fw-bold">
@ -18,6 +13,18 @@
<div class="col-sm-8">{{ impact.co2_emissions|default:'0.0' }} kg</div>
</div>
<div class="row mb-3">
<div class="col-sm-12 d-flex justify-content-end">
<div class="border p-2 rounded d-flex align-items-center">
<label for="algorithmSelect" class="text-muted fw-bold me-2">{% trans 'Algorithm Selector' %}</label>
<select class="form-select form-select-sm w-auto border-0 shadow-none" id="algorithmSelect" onchange="changeAlgorithm()">
<option value="dummy" selected>{% trans 'Dummy Algorithm' %}</option>
<option value="advanced">{% trans 'Advanced Algorithm' %}</option>
</select>
</div>
</div>
</div>
<div class="mt-4">
<button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#docsCollapse" aria-expanded="false" aria-controls="docsCollapse">
{% trans 'Read about the algorithm insights' %}
@ -25,13 +32,14 @@
<div class="collapse mt-3" id="docsCollapse">
<div class="card card-body">
<div class="markdown-content">
{{ impact.docs|safe }}
</div>
<div class="markdown-content">{{ impact.docs|safe }}</div>
</div>
</div>
</div>
</div>
<!-- MathJax for LaTeX rendering -->
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
<script>
function changeAlgorithm() {
var selectedAlgorithm = document.getElementById('algorithmSelect').value;
}
</script>