diff --git a/frontend/src/assets/co2_ampel.png b/frontend/src/assets/co2_ampel.png
new file mode 100644
index 0000000000000000000000000000000000000000..2bcc4a9f828bd4d4b2fc6c470a106cc09d3660f1
Binary files /dev/null and b/frontend/src/assets/co2_ampel.png differ
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 2fe73bb66673ff03d73a88d61e71e05b4cead722..90a62647db1c74a8c09d3feda0c1701699dfccd0 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -28,7 +28,7 @@ a,
}
#app {
- display: grid;
+ display: flex;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
diff --git a/frontend/src/components/NavBar.vue b/frontend/src/components/NavBar.vue
index bbeef708d7f352cca68fa63149cc3b436c7dcdaa..fa9c39c7b6a50e09ca79412c37a0c029f9a86d3a 100644
--- a/frontend/src/components/NavBar.vue
+++ b/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>
diff --git a/frontend/src/views/AboutView.vue b/frontend/src/views/AboutView.vue
index 869162abfb2b5ac86373024076977703d4490953..62bf0624f448188357da680f94d6edf743cdf95c 100644
--- a/frontend/src/views/AboutView.vue
+++ b/frontend/src/views/AboutView.vue
@@ -1,66 +1,135 @@
<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>