Commit 327054b8 authored by Gezer's avatar Gezer
Browse files

modified ui elements to look better

parent f2b1d5e1
Showing with 244 additions and 95 deletions
+244 -95
...@@ -3,23 +3,30 @@ import { RouterLink, RouterView } from 'vue-router' ...@@ -3,23 +3,30 @@ import { RouterLink, RouterView } from 'vue-router'
</script> </script>
<template> <template>
<header> <header>
<div class="container"> <div class="container">
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="100" height="100" /> <div class="image">
<nav> <RouterLink to="/">
<RouterLink to="/">Home</RouterLink> <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="100" height="100" />
<RouterLink to="/about">About</RouterLink> </RouterLink>
<RouterLink to="/login">Login</RouterLink> </div>
<RouterLink to="/register">Registrieren</RouterLink>
<RouterLink to="/buildingsView">Gebäude</RouterLink>
</nav>
</div>
</header>
<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> </template>
<style scoped> <style scoped>
header { header {
position: fixed; position: fixed;
top: 0; top: 0;
......
...@@ -28,11 +28,83 @@ export default { ...@@ -28,11 +28,83 @@ export default {
</script> </script>
<template> <template>
<h1>Welcome to the home page</h1> <div class="home-container">
<div v-if="authStore.isAuthenticated"> <div class="welcome-box">
<p>Hi there {{ authStore.user?.username }}!</p> <h1>Willkommen auf der HFT CO₂-Webplattform</h1>
<p>You are logged in .</p> <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> <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> </div>
<p v-else>You are not logged in . <router-link to="/login"> Login </router-link></p> </div>
</template> </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
...@@ -30,88 +30,119 @@ export default { ...@@ -30,88 +30,119 @@ export default {
</script> </script>
<template> <template>
<div class="login"> <div class="login-container">
<h1>Login</h1> <div class="login-card">
<form @submit.prevent="login"> <h1>Login</h1>
<div> <p class="intro">Melde dich an, um Zugriff auf Raumdaten und Sensorwerte zu erhalten.</p>
<label for="email"> Email: </label>
<input v-model="email" id="email" type="text" required @input="resetError" /> <form @submit.prevent="login">
</div> <div class="form-group">
<div> <label for="email">Email</label>
<label for="password"> Password: </label> <input
<input v-model="email"
v-model="password" id="email"
id="password" type="text"
type="password" required
required @input="resetError"
@input="resetError" placeholder="z.B. max@ht.de"
/> />
</div> </div>
<button type="submit">Login</button>
</form> <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> <p v-if="error" class="error">{{ error }}</p>
</form>
</div> </div>
<p v-if="error" class="error">{{ error }}</p> </div>
</template> </template>
<style scoped> <style scoped>
.login { .login-container {
max-width: 400px; display: flex;
margin: 40px auto; justify-content: center;
padding: 2rem; align-items: center;
background-color: #f8f9fa; min-height: 80vh;
border-radius: 8px;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
font-family: sans-serif;
} }
.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; text-align: center;
color: #333; 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 { .form-group {
margin-bottom: 1rem; margin-bottom: 1.5rem;
} }
label { label {
display: block; display: block;
margin-bottom: 0.3rem; margin-bottom: 0.5rem;
font-weight: 500; font-weight: 600;
color: #555; color: #444;
} }
input { input {
width: 100%; width: 100%;
padding: 0.5rem 0.75rem; padding: 0.6rem 0.75rem;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 6px;
font-size: 1rem; font-size: 1rem;
box-sizing: border-box; }
input:focus {
border-color: #007bff;
outline: none;
} }
button { button {
width: 100%; width: 100%;
padding: 0.75rem; padding: 0.75rem;
background-color: #28a745; background-color: #007bff;
color: white; color: white;
border: none;
border-radius: 4px;
font-weight: bold; font-weight: bold;
border: none;
border-radius: 6px;
font-size: 1rem; font-size: 1rem;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
} }
button:hover { button:hover {
background-color: #218838; background-color: #0056b3;
} }
.error { .error {
margin-top: 1rem; margin-top: 1rem;
color: #dc3545; color: #dc3545;
text-align: center; text-align: center;
font-weight: 500;
} }
</style> </style>
\ No newline at end of file
...@@ -43,60 +43,97 @@ export default { ...@@ -43,60 +43,97 @@ export default {
</script> </script>
<template> <template>
<div class="register"> <div class="register-container">
<h2>Register</h2> <div class="register-card">
<form @submit.prevent="register"> <h1>Registrieren</h1>
<div> <p class="intro">Erstelle ein Konto, um Zugriff auf Sensor- und Raumdaten zu erhalten.</p>
<label for="email"> Email: </label>
<input v-model="email" id="email" type="email" required /> <form @submit.prevent="register">
</div> <div class="form-group">
<div> <label for="email">Email</label>
<label for="password"> Password: </label> <input
<input v-model="password" id="password" type="password" required /> v-model="email"
</div> id="email"
<button type="submit">Register</button> type="email"
</form> required
<p v-if="error">{{ error }}</p> placeholder="z.B. max@ht.de"
<p v-if="success">{{ success }}</p> />
</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>
</div>
</template> </template>
<style scoped> <style scoped>
.register { .register-container {
max-width: 400px; display: flex;
margin: 40px auto; justify-content: center;
padding: 2rem; align-items: center;
background-color: #f8f9fa; min-height: 80vh;
border-radius: 8px; }
box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
font-family: sans-serif; .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; text-align: center;
color: #333; 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 { .form-group {
margin-bottom: 1rem; margin-bottom: 1.5rem;
} }
label { label {
display: block; display: block;
margin-bottom: 0.3rem; margin-bottom: 0.5rem;
font-weight: 500; font-weight: 600;
color: #555; color: #444;
} }
input { input {
width: 100%; width: 100%;
padding: 0.5rem 0.75rem; padding: 0.6rem 0.75rem;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 6px;
font-size: 1rem; font-size: 1rem;
box-sizing: border-box; }
input:focus {
border-color: #007bff;
outline: none;
} }
button { button {
...@@ -104,9 +141,9 @@ button { ...@@ -104,9 +141,9 @@ button {
padding: 0.75rem; padding: 0.75rem;
background-color: #007bff; background-color: #007bff;
color: white; color: white;
border: none;
border-radius: 4px;
font-weight: bold; font-weight: bold;
border: none;
border-radius: 6px;
font-size: 1rem; font-size: 1rem;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
...@@ -120,11 +157,13 @@ button:hover { ...@@ -120,11 +157,13 @@ button:hover {
margin-top: 1rem; margin-top: 1rem;
color: #dc3545; color: #dc3545;
text-align: center; text-align: center;
font-weight: 500;
} }
.success { .success {
margin-top: 1rem; margin-top: 1rem;
color: #28a745; color: #28a745;
text-align: center; text-align: center;
font-weight: 500;
} }
</style> </style>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment