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

modified ui elements to look better

parent f2b1d5e1
Hide whitespace changes
Inline Side-by-side
frontend/src/components/NavBar.vue
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
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
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
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