Skip to content
GitLab
Commit 327054b8 authored by Gezer's avatar Gezer
Browse files

modified ui elements to look better

parent f2b1d5e1
main
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 244 additions and 95 deletions
+244 -95
frontend/src/components/NavBar.vue
+ 20
- 13
View file @ 327054b8
......@@ -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;
......
frontend/src/views/HomeView.vue
+ 77
- 5
View file @ 327054b8
......@@ -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
frontend/src/views/LoginView.vue
+ 73
- 42
View file @ 327054b8
......@@ -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
frontend/src/views/RegisterView.vue
+ 74
- 35
View file @ 327054b8
......@@ -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
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

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal