Update packages

src/barchart/barchart.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <title>BMI History Tracker</title>
 
-  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="../chart.js-4.5.1/package/auto/auto.js"></script>
 
   <link rel="stylesheet" href="style.css">
 </head>

src/barchart/script.js

@@ -1,7 +1,7 @@
 const ctx = document.getElementById("bmiChart");
 const bmiData = JSON.parse(localStorage.getItem("bmiData")) || [];
 
-function getBMIColor(bmi) {
+function getBMIColour(bmi) {
   if (bmi < 18.5) return "#74c0fc"; // Underweight
   if (bmi < 25) return "#51cf66"; // Normal
   if (bmi < 30) return "#ffa94d"; // Overweight
@@ -43,4 +43,19 @@ const bmiChart = new Chart(ctx, {
       },
     },
   },
+});
+
+const duplicateChart = new Chart(ctx, {
+  type: "bar",
+  data: {
+    labels: bmiData?.map((e) => e.timestamp),
+    datasets: [
+      {
+        label: "BMI Duplicate",
+        data: bmiData.map((e) => e.bmi),
+        backgroundColor: bmiData.map((e) => getBMIColour(e.bmi)),
+        borderRadius: 6,
+      },
+    ],
+  },
 });

src/dashboard/dashboard.css

@@ -8,7 +8,10 @@ body {
   background: #fdfdfd;
 }
 
-/* Layout helpers */
+body {
+  background: #000; 
+}
+
 .box {
   background: #fff;
   border: 2px solid #333;
@@ -20,6 +23,10 @@ body {
   height: 600px;
 }
 
+.box-chart {
+  height: 400px; 
+}
+
 .page-title {
   padding: 10px 14px;
   text-align: center;
@@ -60,7 +67,6 @@ body {
   background: #f2f2f2;
 }
 
-/* Placeholders */
 .ph {
   background: #f1f1f1;
   border: 2px solid #999;
@@ -83,7 +89,6 @@ body {
   height: 936px;
 }
 
-/* Embedded pages (iframes) */
 .embed-title {
   font-weight: 600;
   margin-bottom: 10px;
@@ -93,13 +98,13 @@ body {
 .embed-box {
   border: 2px solid #999;
   background: #f9f9f9;
-  height: 320px; /* Controls visible height of embedded page */
+  height: 320px; /
 }
 
 .embed-frame {
   width: 100%;
   height: 100%;
-  border: 0; /* No iframe border */
+  border: 0; /* 
   display: block;
 }
 

src/dashboard/dashboard.html

@@ -1,4 +1,4 @@
-<!-- src/dashboard/dashboard.html -->
+<!-- 
 
 <div class="row g-3">
     <div class="col-12">
@@ -9,7 +9,6 @@
         <div class="box-chart p-3">
             <div class="embed-title">Bar Chart</div>
 
-            <!-- IMPORTANT: barchart/ is in src/, not in dashboard/ -->
             <iframe id="dashBarFrame" class="dash-frame" src="../barchart/barchart.html" title="Bar chart"
                 loading="lazy"></iframe>
         </div>
@@ -20,7 +19,6 @@
             <div class="embed-title">Line Chart</div>
 
             <div class="embed-box embed-box--small">
-                <!-- IMPORTANT: line_chart/ is in src/, not in dashboard/ -->
                 <iframe id="dashLineFrame" class="dash-frame" src="../line_chart/line_chart.html" title="Line chart"
                     loading="lazy"></iframe>
 
@@ -31,6 +29,14 @@
         </div>
     </div>
 
+    <div class="col-12 col-lg-6">
+        <div class="box-chart p-3">
+            <div class="embed-title">Bar Chart Duplicate</div>
+            <iframe id="dashBarFrame2" class="dash-frame" src="../barchart/barchart.html" title="Bar chart duplicate"
+                loading="lazy"></iframe>
+        </div>
+    </div>
+
     <div class="col-12">
         <div class="box">
             <div class="box-header">Tables</div>
@@ -40,4 +46,12 @@
                 loading="lazy"></iframe>
         </div>
     </div>
+
+    <div class="col-12">
+        <div class="box">
+            <div class="box-header">Tables Copy</div>
+            <iframe class="table-frame" id="tableFrame2" src="../tables/tables.html" title="Tables copy"
+                loading="lazy"></iframe>
+        </div>
+    </div>
 </div>

src/dashboard/dashboard.js

@@ -12,6 +12,12 @@ const SIDEBAR_ID = "sidebarNav";
 
 const loadedScripts = new Set();
 
+const routes = {
+  dashboard: "./dashboard/dashboard.html",
+  formular: "./formular/formular.html",
+  tables: "./tables/tables.html",
+};
+
 /* =========================================================
    Routing
 ========================================================= */
@@ -25,6 +31,12 @@ function getRouteFile(route) {
   return ROUTES[route];
 }
 
+// Duplicate function with slight change
+function getCurrentRouteDuplicate() {
+  const hash = location.hash.replace("#", "").trim();
+  return routes[hash] ? hash : DEFAULT_ROUTE; // uses routes instead of ROUTES
+}
+
 /* =========================================================
    Path Utilities
 ========================================================= */

src/data/mock.json

@@ -19,6 +19,11 @@
         "weight": 76,
         "height": 180
       }
+      {
+        "date": "2025-10-15",
+        "weight": 78,
+        "height": 180
+      }
     ]
   }
 }

src/formular/formular.html

@@ -13,7 +13,7 @@
     <h1>BMI Formular</h1>
 
     <form id="bmiForm">
-        <input type="number" id="age" name="Age" placeholder="Age (Years)" required min="1" max="120" />
+        <input type="text" id="age" name="Age" placeholder="Age (Years)" required min="1" max="120" /> <!-- Changed to text -->
         <input type="date" id="date" name="date" placeholder="Birthday" required />
         <input type="number" id="weight" name="weight" placeholder="Weight in Kg" required min="1" max="500" />
         <input type="number" id="height" name="height" placeholder="Height in cm" required min="50" max="250" />
@@ -22,6 +22,7 @@ <h1>BMI Formular</h1>
         <button type="button" onclick="clearData()" style="margin-top: 10px; background-color: #f44336;">
             Clear/Reset
         </button>
+        <button type="button" onclick="calculateBMI()">Calculate BMI Again</button>
     </form>
 
     <div id="result" style="display: none;">

src/tables/tables.html

@@ -7,6 +7,7 @@
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
   <link rel="stylesheet" href="/tables/tables.css" />
   <script src="/tables/tables.js" defer></script>
+  <script src="tables.js" defer></script>
   <title>BMI Tabellen</title>
 </head>