Add UI polishing for the demo
This commit is contained in:
parent
448287248e
commit
01dbe005e4
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue