From 01dbe005e4c5bc8d85362df66d222b39c0a08e6a Mon Sep 17 00:00:00 2001
From: sergiogimenez <hi@sergiogimenez.com>
Date: Wed, 26 Feb 2025 18:44:50 +0100
Subject: [PATCH] Add UI polishing for the demo

---
 .../templates/tabs/environmental_impact.html  | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/device/templates/tabs/environmental_impact.html b/device/templates/tabs/environmental_impact.html
index f7f7b8f..e714558 100644
--- a/device/templates/tabs/environmental_impact.html
+++ b/device/templates/tabs/environmental_impact.html
@@ -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>