diff --git a/frontend/src/components/NavBar.vue b/frontend/src/components/NavBar.vue
index fa9c39c7b6a50e09ca79412c37a0c029f9a86d3a..565123197e36c4c4e7c127edc9ffc74c8fd04140 100644
--- a/frontend/src/components/NavBar.vue
+++ b/frontend/src/components/NavBar.vue
@@ -3,23 +3,30 @@ import { RouterLink, RouterView } from 'vue-router'
</script>
<template>
- <header>
- <div class="container">
- <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>
- </nav>
- </div>
- </header>
+ <header>
+ <div class="container">
+ <div class="image">
+ <RouterLink to="/">
+ <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="100" height="100" />
+ </RouterLink>
+ </div>
- <RouterView />
+ <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>
+ </nav>
+ </div>
+ </header>
+
+ <RouterView />
</template>
+
<style scoped>
+
header {
position: fixed;
top: 0;
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 7fe20c308f94db109016634835d1b8bd8771438d..c0f02a1604e544ed06b2061be2c9e37ddf22f80c 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -28,11 +28,83 @@ export default {
</script>
<template>
- <h1>Welcome to the home page</h1>
- <div v-if="authStore.isAuthenticated">
- <p>Hi there {{ authStore.user?.username }}!</p>
- <p>You are logged in .</p>
+ <div class="home-container">
+ <div class="welcome-box">
+ <h1>Willkommen auf der HFT COâ‚‚-Webplattform</h1>
+ <p>
+ Hier kannst du Umweltdaten wie CO₂-Konzentration, Temperatur und Luftfeuchtigkeit aus verschiedenen Räumen der HFT visualisieren.
+ </p>
+
+ <div v-if="authStore.isAuthenticated" class="status-box">
+ <h2>👋 Hallo, {{ authStore.user?.username }}</h2>
+ <p>Du bist aktuell eingeloggt.</p>
<button @click="logout">Logout</button>
+ </div>
+
+ <div v-else class="status-box">
+ <p>Du bist nicht eingeloggt.</p>
+ <router-link class="login-link" to="/login">Jetzt einloggen</router-link>
+ </div>
</div>
- <p v-else>You are not logged in . <router-link to="/login"> Login </router-link></p>
+ </div>
</template>
+
+
+<style scoped>
+.home-container {
+ display: flex;
+ justify-content: center;
+ padding-top: 120px;
+ padding: 2rem;
+}
+
+.welcome-box {
+ max-width: 800px;
+ width: 100%;
+ background: #f5f5f5;
+ padding: 2rem;
+ border-radius: 12px;
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+ text-align: center;
+}
+
+h1 {
+ font-size: 2rem;
+ margin-bottom: 1rem;
+}
+
+.status-box {
+ margin-top: 2rem;
+ padding: 1rem;
+ background-color: #ffffff;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+}
+
+button {
+ margin-top: 1rem;
+ padding: 0.6rem 1.2rem;
+ background-color: #007bff;
+ color: white;
+ font-weight: bold;
+ border: none;
+ border-radius: 6px;
+ cursor: pointer;
+}
+
+button:hover {
+ background-color: #0056b3;
+}
+
+.login-link {
+ display: inline-block;
+ margin-top: 0.8rem;
+ color: #007bff;
+ text-decoration: none;
+ font-weight: bold;
+}
+
+.login-link:hover {
+ text-decoration: underline;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index 9660d873925408382051556fe0416b34d4bcef87..858fd68024d1ee3252862297cc4d08a93ef3c68d 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -30,88 +30,119 @@ export default {
</script>
<template>
- <div class="login">
- <h1>Login</h1>
- <form @submit.prevent="login">
- <div>
- <label for="email"> Email: </label>
- <input v-model="email" id="email" type="text" required @input="resetError" />
- </div>
- <div>
- <label for="password"> Password: </label>
- <input
- v-model="password"
- id="password"
- type="password"
- required
- @input="resetError"
- />
- </div>
- <button type="submit">Login</button>
- </form>
+ <div class="login-container">
+ <div class="login-card">
+ <h1>Login</h1>
+ <p class="intro">Melde dich an, um Zugriff auf Raumdaten und Sensorwerte zu erhalten.</p>
+
+ <form @submit.prevent="login">
+ <div class="form-group">
+ <label for="email">Email</label>
+ <input
+ v-model="email"
+ id="email"
+ type="text"
+ required
+ @input="resetError"
+ placeholder="z.B. max@ht.de"
+ />
+ </div>
+
+ <div class="form-group">
+ <label for="password">Passwort</label>
+ <input
+ v-model="password"
+ id="password"
+ type="password"
+ required
+ @input="resetError"
+ placeholder="••••••••"
+ />
+ </div>
+
+ <button type="submit">Einloggen</button>
<p v-if="error" class="error">{{ error }}</p>
+ </form>
</div>
- <p v-if="error" class="error">{{ error }}</p>
+ </div>
</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-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 80vh;
}
-.login h1 {
+.login-card {
+ background-color: #f9f9f9;
+ padding: 2.5rem;
+ border-radius: 12px;
+ box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
+ width: 100%;
+ max-width: 420px;
+ font-family: 'Segoe UI', sans-serif;
+}
+
+h1 {
text-align: center;
color: #333;
- margin-bottom: 1.5rem;
+ margin-bottom: 0.5rem;
+}
+
+.intro {
+ text-align: center;
+ font-size: 0.95rem;
+ color: #666;
+ margin-bottom: 2rem;
}
.form-group {
- margin-bottom: 1rem;
+ margin-bottom: 1.5rem;
}
label {
display: block;
- margin-bottom: 0.3rem;
- font-weight: 500;
- color: #555;
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+ color: #444;
}
input {
width: 100%;
- padding: 0.5rem 0.75rem;
+ padding: 0.6rem 0.75rem;
border: 1px solid #ccc;
- border-radius: 4px;
+ border-radius: 6px;
font-size: 1rem;
- box-sizing: border-box;
+}
+
+input:focus {
+ border-color: #007bff;
+ outline: none;
}
button {
width: 100%;
padding: 0.75rem;
- background-color: #28a745;
+ background-color: #007bff;
color: white;
- border: none;
- border-radius: 4px;
font-weight: bold;
+ border: none;
+ border-radius: 6px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.2s ease;
}
button:hover {
- background-color: #218838;
+ background-color: #0056b3;
}
.error {
margin-top: 1rem;
color: #dc3545;
text-align: center;
+ font-weight: 500;
}
</style>
\ No newline at end of file
diff --git a/frontend/src/views/RegisterView.vue b/frontend/src/views/RegisterView.vue
index ea61419cf46a0f061d4d2658180a9c2635bab751..2a3822e35df365e1c0d7c0c340b36f0b89f79b25 100644
--- a/frontend/src/views/RegisterView.vue
+++ b/frontend/src/views/RegisterView.vue
@@ -43,60 +43,97 @@ export default {
</script>
<template>
- <div class="register">
- <h2>Register</h2>
- <form @submit.prevent="register">
- <div>
- <label for="email"> Email: </label>
- <input v-model="email" id="email" type="email" required />
- </div>
- <div>
- <label for="password"> Password: </label>
- <input v-model="password" id="password" type="password" required />
- </div>
- <button type="submit">Register</button>
- </form>
- <p v-if="error">{{ error }}</p>
- <p v-if="success">{{ success }}</p>
+ <div class="register-container">
+ <div class="register-card">
+ <h1>Registrieren</h1>
+ <p class="intro">Erstelle ein Konto, um Zugriff auf Sensor- und Raumdaten zu erhalten.</p>
+
+ <form @submit.prevent="register">
+ <div class="form-group">
+ <label for="email">Email</label>
+ <input
+ v-model="email"
+ id="email"
+ type="email"
+ required
+ placeholder="z.B. max@ht.de"
+ />
+ </div>
+
+ <div class="form-group">
+ <label for="password">Passwort</label>
+ <input
+ v-model="password"
+ id="password"
+ type="password"
+ required
+ placeholder="••••••••"
+ />
+ </div>
+
+ <button type="submit">Registrieren</button>
+
+ <p v-if="error" class="error">{{ error }}</p>
+ <p v-if="success" class="success">{{ success }}</p>
+ </form>
</div>
+ </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-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 80vh;
+}
+
+.register-card {
+ background-color: #f9f9f9;
+ padding: 2.5rem;
+ border-radius: 12px;
+ box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
+ width: 100%;
+ max-width: 420px;
+ font-family: 'Segoe UI', sans-serif;
}
-.register h2 {
+h1 {
text-align: center;
color: #333;
- margin-bottom: 1.5rem;
+ margin-bottom: 0.5rem;
+}
+
+.intro {
+ text-align: center;
+ font-size: 0.95rem;
+ color: #666;
+ margin-bottom: 2rem;
}
.form-group {
- margin-bottom: 1rem;
+ margin-bottom: 1.5rem;
}
label {
display: block;
- margin-bottom: 0.3rem;
- font-weight: 500;
- color: #555;
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+ color: #444;
}
input {
width: 100%;
- padding: 0.5rem 0.75rem;
+ padding: 0.6rem 0.75rem;
border: 1px solid #ccc;
- border-radius: 4px;
+ border-radius: 6px;
font-size: 1rem;
- box-sizing: border-box;
+}
+
+input:focus {
+ border-color: #007bff;
+ outline: none;
}
button {
@@ -104,9 +141,9 @@ button {
padding: 0.75rem;
background-color: #007bff;
color: white;
- border: none;
- border-radius: 4px;
font-weight: bold;
+ border: none;
+ border-radius: 6px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.2s ease;
@@ -120,11 +157,13 @@ button:hover {
margin-top: 1rem;
color: #dc3545;
text-align: center;
+ font-weight: 500;
}
.success {
margin-top: 1rem;
color: #28a745;
text-align: center;
+ font-weight: 500;
}
-</style>
+</style>
\ No newline at end of file