updated gitignore and added a new component in the about page (does not work...

updated gitignore and added a new component in the about page (does not work right now because i had to fix a merge confligt for the past hour) Made the Login and register page look better

.gitignore

@@ -187,6 +187,8 @@ node_modules
 
 # local env files
 
+.env
+.env.docker
 
 # Log files
 npm-debug.log*
@@ -231,3 +233,4 @@ dist-ssr
 */services/mosquitto.db
 ./services/mqtt/data/mosquitto.db
 services/mqtt/data/mosquitto.db
+services/influxdb/influxdb2-admin-token

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"
+      />
     </div>
 </template>
 
+<script lang="ts">
+import { defineComponent, ref, onMounted } from 'vue';
+import ChartCard from '../components/ChartCard.vue';
+
+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_csv_download?room=1/121&start=-1h&stop=now()';
+        const response = await fetch(url);
+        const json = await response.json();
+        console.log('✅ Daten erhalten:', json);
+
+        const entries = Object.entries(json.data).sort(([a], [b]) =>
+          new Date(a).getTime() - new Date(b).getTime()
+        );
+
+        labels.value = entries.map(([timestamp]) =>
+          new Date(timestamp).toLocaleTimeString()
+        );
+        co2Data.value = entries.map(([, values]) => Number(values.co2));
+      } catch (err) {
+        console.error('Fehler beim Laden der CO₂-Daten:', err);
+      }
+    });
+
+    return { labels, co2Data };
+  }
+});
+</script>
+
 <style>
 @media (min-width: 1024px) {
     .about {

frontend/src/views/BuildingsView.vue

@@ -25,26 +25,7 @@ const buildings = [
     title: 'Bau 2',
     description: 'Informatik und IT-Räume',
     image: '/images/building2.png',
-  },
-    {
-    id: '2',
-    title: 'Bau 2',
-    description: 'Informatik und IT-Räume',
-    image: '/images/building2.png',
-  },
-    {
-    id: '2',
-    title: 'Bau 2',
-    description: 'Informatik und IT-Räume',
-    image: '/images/building2.png',
-  },
-    {
-    id: '2',
-    title: 'Bau 2',
-    description: 'Informatik und IT-Räume',
-    image: '/images/building2.png',
-  },
-  
+  }
 ]
 </script>
 

frontend/src/views/LoginView.vue

@@ -53,3 +53,65 @@ export default {
     </div>
     <p v-if="error" class="error">{{ error }}</p>
 </template>
+
+
+<style scoped>
+.login {
+  max-width: 400px;
+  margin: 40px auto;
+  padding: 2rem;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
+  font-family: sans-serif;
+}
+
+.login h1 {
+  text-align: center;
+  color: #333;
+  margin-bottom: 1.5rem;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.3rem;
+  font-weight: 500;
+  color: #555;
+}
+
+input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 1rem;
+  box-sizing: border-box;
+}
+
+button {
+  width: 100%;
+  padding: 0.75rem;
+  background-color: #28a745;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-weight: bold;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+button:hover {
+  background-color: #218838;
+}
+
+.error {
+  margin-top: 1rem;
+  color: #dc3545;
+  text-align: center;
+}
+</style>
\ No newline at end of file

frontend/src/views/RegisterView.vue

@@ -43,7 +43,7 @@ export default {
 </script>
 
 <template>
-    <div>
+    <div class="register">
         <h2>Register</h2>
         <form @submit.prevent="register">
             <div>
@@ -60,3 +60,71 @@ export default {
         <p v-if="success">{{ success }}</p>
     </div>
 </template>
+
+
+<style scoped>
+.register {
+  max-width: 400px;
+  margin: 40px auto;
+  padding: 2rem;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
+  font-family: sans-serif;
+}
+
+.register h2 {
+  text-align: center;
+  color: #333;
+  margin-bottom: 1.5rem;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.3rem;
+  font-weight: 500;
+  color: #555;
+}
+
+input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 1rem;
+  box-sizing: border-box;
+}
+
+button {
+  width: 100%;
+  padding: 0.75rem;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-weight: bold;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+.error {
+  margin-top: 1rem;
+  color: #dc3545;
+  text-align: center;
+}
+
+.success {
+  margin-top: 1rem;
+  color: #28a745;
+  text-align: center;
+}
+</style>