docker

2024-11-05 11:08:28 +01:00
parent 32d7f8a8f5
commit 8ee85912cc
15 changed files with 205 additions and 9 deletions
--- a/www/css/navigation.css
+++ b/www/css/navigation.css
--- a/www/css/style.css
+++ b/www/css/style.css
--- a/www/images/favicon.ico
+++ b/www/images/favicon.ico
--- a/www/index.html
+++ b/www/index.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="de" >
+    <head>
+        <meta charset='utf-8'>
+        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
+        <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9' crossorigin='anonymous'>
+        <link rel='stylesheet' href='css/navigation.css'>
+        <link rel="stylesheet" href="css/style.css">
+        <link rel='icon' href='images/favicon.ico' type='image/x-icon'>
+        <title>Spritpreise</title>
+    </head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
+
+    <body>
+        <div class="wrapper">
+            <header>
+
+            </header>
+            <div class="pageMain">
+                <canvas id="myChart" style="width:100%;max-width:700px"></canvas>
+            </div>
+            <footer>
+
+            </footer>
+        </div>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+        <script src="js/main.js"></script>
+    </body>
+
+</html>
--- a/www/js/main.js
+++ b/www/js/main.js
@@ -0,0 +1,25 @@
+// https://www.w3schools.com/ai/ai_chartjs.asp
+const xValues = [100,200,300,400,500,600,700,800,900,1000];
+
+new Chart("myChart", {
+  type: "line",
+  data: {
+    labels: xValues,
+    datasets: [{
+      data: [860,1140,1060,1060,1070,1110,1330,2210,7830,2478],
+      borderColor: "red",
+      fill: false
+    },{
+      data: [1600,1700,1700,1900,2000,2700,4000,5000,6000,7000],
+      borderColor: "green",
+      fill: false
+    },{
+      data: [300,700,2000,5000,6000,4000,2000,1000,200,100],
+      borderColor: "blue",
+      fill: false
+    }]
+  },
+  options: {
+    legend: {display: false}
+  }
+});