modified main.css so the content is in the center

also modified AboutView with some content

frontend/src/assets/main.css

@@ -28,7 +28,7 @@ a,
     }
 
     #app {
-        display: grid;
+        display: flex;
         grid-template-columns: 1fr 1fr;
         padding: 0 2rem;
     }

frontend/src/components/NavBar.vue

@@ -8,6 +8,7 @@ import { RouterLink, RouterView } from 'vue-router'
             <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="100" height="100" />
             <nav>
                 <RouterLink to="/">Home</RouterLink>
+                <RouterLink to="/about">About</RouterLink>
                 <RouterLink to="/login">Login</RouterLink>
                 <RouterLink to="/register">Registrieren</RouterLink>
                 <RouterLink to="/buildingsView">Gebäude</RouterLink>

frontend/src/views/AboutView.vue

 <template>
-  <div class="about">
-    <h1>This is an about page</h1>
-
-    <ChartCard
-      title="Testdaten CO₂"
-      :labels="labels"
-      :data="co2Data"
-      borderColor="#ff6384"
-    />
-
-    <!-- Debug-Ausgabe zur Kontrolle -->
-    <pre>Labels: {{ labels }}</pre>
-    <pre>Daten: {{ co2Data }}</pre>
+  <div class="about-page">
+    <h1>Über das Projekt</h1>
+
+    <p>
+      Dieses Webportal dient der Visualisierung von Umweltdaten, die mithilfe der von der
+      Hochschule für Technik Stuttgart entwickelten <strong>HFT CO₂-Ampel</strong> erfasst werden.
+      Ziel ist es, CO₂-Konzentration, Temperatur und Luftfeuchtigkeit in Innenräumen
+      kontinuierlich zu messen, auszuwerten und in benutzerfreundlicher Form anzuzeigen.
+    </p>
+
+    <h2>Was ist die HFT CO₂-Ampel?</h2>
+    <p>
+      Die CO₂-Ampel ist ein einfach zusammenbaubarer Bausatz auf Basis eines ESP8266 (NodeMCU)
+      und eines Sensirion SCD30 CO₂-Sensors. Sie ist in der Lage, CO₂-Werte hochauflösend zu
+      messen, die Luftqualität per LED-Farbring darzustellen und Daten kabellos zu übertragen.
+    </p>
+
+    <p>
+      Die Anzeige erfolgt farblich anhand der Luftqualität gemäß DIN EN 13779:
+      <ul>
+        <li>Grün: gute Luftqualität (bis 800 ppm)</li>
+        <li>Gelb/Orange: erhöhte Werte, Lüften empfohlen</li>
+        <li>Rot: schlechte Luftqualität (> 1600 ppm), Lüften erforderlich</li>
+        <li>Blinkend Rot: sehr schlechte Luftqualität (> 2000 ppm)</li>
+      </ul>
+    </p>
+
+    <h2>Hardware & Technik</h2>
+    <ul>
+      <li><strong>Sensor:</strong> Sensirion SCD30 CO₂-, Temperatur- und Feuchtigkeitssensor</li>
+      <li><strong>Steuerung:</strong> ESP8266 Microcontroller (NodeMCU)</li>
+      <li><strong>Anzeige:</strong> WS2812 RGB-LED-Ring</li>
+      <li><strong>Gehäuse:</strong> Plexiglas mit Wand- oder Tischmontage</li>
+      <li><strong>Software:</strong> Arduino-basierte Firmware mit WLAN/MQTT-Unterstützung</li>
+    </ul>
+
+    <h2>Webinterface</h2>
+    <p>
+      Die von der Ampel gemessenen Daten werden in einer zentralen Datenbank gespeichert
+      und über dieses Portal visualisiert. Nutzerinnen und Nutzer können z. B. den Verlauf der
+      CO₂-Konzentration eines Raumes einsehen und so datenbasiert lüften oder auf
+      Luftqualitätsveränderungen reagieren.
+    </p>
+
+    <h2>Open Source & Bildung</h2>
+    <p>
+      Die gesamte CO₂-Ampel ist <strong>Open Source</strong> (GPLv3) und wurde mit Blick auf Bildung,
+      Transparenz und Erweiterbarkeit entwickelt. Sie eignet sich ideal für Hochschulen,
+      Schulen und private Anwendungen.
+    </p>
+
+    <h2>Projektteam</h2>
+    <p>
+      Das Projekt wurde an der HFT Stuttgart unter anderem von Eric Duminil, Tobias Erhart,
+      Myriam Guedey, Nathalie Heimsch, Benjamin Hueber, Robert Otto und Jonas Stave entwickelt.
+    </p>
+
+    <p>
+      Weitere Infos und Bauanleitungen unter:
+      <a href="https://transfer.hft-stuttgart.de/gitlab/co2ampel" target="_blank">
+        https://transfer.hft-stuttgart.de/gitlab/co2ampel
+      </a>
+    </p>
+
+
+    <h2>Technologie</h2>
+    <ul>
+      <li><strong>Frontend:</strong> Vue.js 3</li>
+      <li><strong>Backend:</strong> Django REST Framework</li>
+      <li><strong>Datenbank:</strong> SQLite (Testumgebung)</li>
+      <li><strong>Datenquelle:</strong> CO₂-, Temperatur- und Feuchtigkeitssensoren in HT Gebäuden</li>
+    </ul>
+
+    <h2>Beispielhafte Sensoren</h2>
+    <div class="sensor-gallery">
+       <img src="../assets/co2_ampel.png" alt="Ampel Hardware" />
+    </div>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, onMounted } from 'vue';
-import ChartCard from '../components/ChartCard.vue';
-
-const availableRooms = ['1/121', '1/131', '1/210', '1/211']
-
-export default defineComponent({
-  name: 'AboutView',
-  components: { ChartCard },
-  setup() {
-    const labels = ref<string[]>([]);
-    const co2Data = ref<number[]>([]);
-
-    onMounted(async () => {
-      try {
-        const url = 'http://localhost:8000/api/room_data_range?room=1/210&start=-7d&stop=now()';
-        //const url = 'http://localhost:8000/api/room_data_range?room=${room.value}&start=${start.value}&stop=${stop.value}';
-        const response = await fetch(url);
-
-        if (!response.ok) {
-          throw new Error(`HTTP-Fehler: ${response.status}`);
-        }
-
-        const json = await response.json();
-        console.log('📦 JSON:', json);
-        console.log('🔍 JSON.data:', json.data);
-        const entries = Object.entries(json.data).sort(
-          ([a], [b]) => new Date(a).getTime() - new Date(b).getTime()
-        );
-
-        const labelsArray = entries.map(([timestamp]) =>
-          new Date(timestamp).toLocaleTimeString()
-        );
-        const co2DataArray = entries.map(([, values]) => values.co2);
-
-        labels.value = labelsArray;
-        co2Data.value = co2DataArray;
-
-        console.log('✅ Labels:', labelsArray);
-        console.log('✅ CO₂-Werte:', co2DataArray);
-      } catch (err) {
-        console.error('❌ Fehler beim Laden der Daten:', err);
-      }
-    });
-
-    return { labels, co2Data };
-  }
-});
+<script setup lang="ts">
+// Kein Script nötig für statische Seite
 </script>
+
+<style scoped>
+.about-page {
+  max-width: 800px;
+  margin: 3rem auto;
+  padding: 1rem 2rem;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  font-family: sans-serif;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.about-page h1 {
+  color: #333;
+  text-align: center;
+  margin-bottom: 1.5rem;
+}
+
+.about-page h2 {
+  margin-top: 2rem;
+  color: #333;
+}
+
+.about-page li {
+  color: #333;
+}
+
+.about-page p {
+  line-height: 1.6;
+  color: #444;
+}
+
+.about-page ul {
+  padding-left: 1.5rem;
+}
+
+.sensor-gallery {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.sensor-gallery img {
+  width: 180px;
+  height: auto;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+}
+</style>