closes feature/ui-rework #10

Merged
triggermeelmo merged 6 commits from feature/ui-rework into development 2025-09-30 09:08:57 +02:00
21 changed files with 285 additions and 216 deletions
Showing only changes of commit 7def038cc9 - Show all commits

View File

@@ -0,0 +1,32 @@
using System.Threading.Tasks;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using Watcher.Data;
[Route("[controller]/v1")]
public class ApiController : Controller
{
private readonly AppDbContext _context;
private readonly ILogger<ApiController> _logger;
public ApiController(AppDbContext context, ILogger<ApiController> logger)
{
_context = context;
_logger = logger;
}
[HttpGet("reference")]
public IActionResult ApiReference()
{
return View();
}
[HttpGet("servers")]
public async Task<IActionResult> GetAllServers()
{
var Servers = await _context.Servers.OrderBy(s => s.Id).ToListAsync();
return Ok();
}
}

View File

@@ -116,7 +116,7 @@ namespace Watcher.Controllers
TempData["DumpMessage"] = "SQLite-Dump erfolgreich erstellt."; TempData["DumpMessage"] = "SQLite-Dump erfolgreich erstellt.";
_logger.LogInformation("SQLite-Dump erfolgreich erstellt."); _logger.LogInformation("SQLite-Dump erfolgreich erstellt.");
return RedirectToAction("UserSettings", "User"); return RedirectToAction("Settings", "System");
} }
catch (Exception ex) catch (Exception ex)
{ {

View File

@@ -0,0 +1,36 @@
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Watcher.Data;
using Watcher.ViewModels;
namespace Watcher.Controllers;
[Authorize]
[Route("[controller]")]
public class SystemController : Controller
{
private readonly AppDbContext _context;
private readonly ILogger<SystemController> _logger;
public SystemController(AppDbContext context, ILogger<SystemController> logger)
{
_context = context;
_logger = logger;
}
// Edit-Form anzeigen
[HttpGet("Settings")]
//public async Task<IActionResult> Settings()
public IActionResult Settings()
{
ViewBag.DbProvider = "Microsoft.EntityFrameworkCore.Sqlite";
ViewBag.mail = "test@mail.com";
ViewBag.IdentityProvider = "Local";
ViewBag.ServerVersion = "v0.1.0";
return View();
}
// HttpPost
// public IActionResult UpdateNotifications(){}
}

View File

@@ -55,6 +55,7 @@ public class UserController : Controller
var user = _context.Users.FirstOrDefault(u => u.Username == username); var user = _context.Users.FirstOrDefault(u => u.Username == username);
if (user == null) return NotFound(); if (user == null) return NotFound();
var model = new EditUserViewModel var model = new EditUserViewModel
{ {
Username = user.Username Username = user.Username
@@ -90,31 +91,6 @@ public class UserController : Controller
return RedirectToAction("Index", "Home"); return RedirectToAction("Index", "Home");
} }
// Edit-Form anzeigen
[Authorize]
[HttpGet]
public IActionResult UserSettings()
{
var username = User.Identity?.Name;
Console.WriteLine("gefundener User: " + username);
var claims = User.Claims.Select(c => new { c.Type, c.Value }).ToList();
var user = _context.Users.FirstOrDefault(u => u.Username == username);
if (user == null) return NotFound();
var DbProvider = _context.Database.ProviderName;
var mail = user.Email;
ViewBag.Name = username;
ViewBag.mail = mail;
ViewBag.Claims = claims;
ViewBag.IdentityProvider = user.IdentityProvider;
ViewBag.DbProvider = DbProvider;
return View();
}
// Edit speichern // Edit speichern
[Authorize] [Authorize]
[HttpPost] [HttpPost]

View File

@@ -0,0 +1 @@
<p>i</p>

View File

@@ -5,55 +5,10 @@
var oidc = ViewBag.oidc; var oidc = ViewBag.oidc;
} }
<style> <head>
body { <link rel="stylesheet" href="~/css/main.css" />
background-color: #0d1b2a; <link rel="stylesheet" href="~/css/Login.css" />
} </head>
.login-card {
background-color: #1b263b;
color: #ffffff;
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
max-width: 400px;
margin: auto;
}
.form-control {
background-color: #415a77;
border: none;
color: white;
}
.form-control::placeholder {
color: #c0c0c0;
}
.btn-primary {
background-color: #0d6efd;
border: none;
}
.btn-pocketid {
background-color: #14a44d;
color: white;
border: none;
}
.btn-pocketid:hover {
background-color: #0f8c3c;
}
label {
margin-top: 1rem;
}
.form-error {
color: #ff6b6b;
font-size: 0.875rem;
}
</style>
<div class="login-card"> <div class="login-card">
<h2 class="text-center mb-4">Anmelden</h2> <h2 class="text-center mb-4">Anmelden</h2>

View File

@@ -3,6 +3,11 @@
ViewData["Title"] = "Datenbank-Dumps"; ViewData["Title"] = "Datenbank-Dumps";
} }
<head>
<link rel="stylesheet" href="~/css/main.css" />
<link rel="stylesheet" href="~/css/databases.css" />
</head>
<h2 class="mb-4 text-xl font-bold"><i class="bi bi-hdd me-1"></i>Datenbank-Dumps</h2> <h2 class="mb-4 text-xl font-bold"><i class="bi bi-hdd me-1"></i>Datenbank-Dumps</h2>
@if (TempData["Success"] != null) @if (TempData["Success"] != null)
@@ -14,7 +19,7 @@
<div class="alert alert-danger">@TempData["Error"]</div> <div class="alert alert-danger">@TempData["Error"]</div>
} }
<table class="table table-striped"> <table class="dumptable">
<thead> <thead>
<tr> <tr>
<th>Dateiname</th> <th>Dateiname</th>

View File

@@ -10,9 +10,6 @@
</head> </head>
<body> <body>
<div class="test">
<p>test</p>
</div>
<div class="row g-4 mb-4"> <div class="row g-4 mb-4">
<div class="col-12 col-sm-6 col-lg-3"> <div class="col-12 col-sm-6 col-lg-3">
<div class="card shadow-sm border-0 rounded-3 text-center h-100"> <div class="card shadow-sm border-0 rounded-3 text-center h-100">

View File

@@ -3,93 +3,81 @@
ViewData["Title"] = "Serverübersicht"; ViewData["Title"] = "Serverübersicht";
} }
<head>
<link rel="stylesheet" href="~/css/main.css" />
<link rel="stylesheet" href="~/css/server-detail.css" />
</head>
<div id="server-cards-container"> <div id="server-cards-container">
<div class="container mt-4"></div> <div class="container mt-4">
<div class="card shadow-sm"> <div class="card shadow-sm">
<div class="card-header d-flex justify-content-between align-items-center"> <div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0"> <h5 class="mb-0">
<i class="bi bi-hdd-network me-2 text-primary"></i>Serverdetails: @Model.Name <i class="bi bi-hdd-network me-2 text-primary"></i>@Model.Name
</h5> </h5>
<span class="badge @(Model.IsOnline ? "bg-success" : "bg-danger")"> <span class="badge @(Model.IsOnline ? "bg-success" : "bg-danger")">
<i class="bi @(Model.IsOnline ? "bi-check-circle" : "bi-x-circle") me-1"></i> <i class="bi @(Model.IsOnline ? "bi-check-circle" : "bi-x-circle") me-1"></i>
@(Model.IsOnline ? "Online" : "Offline") @(Model.IsOnline ? "Online" : "Offline")
</span> </span>
</div>
<div class="row mb-3"></div>
<div class="col-md-5 text-muted small">
<div><i class="bi bi-globe me-1"></i><strong>IP:</strong> @Model.IPAddress</div>
<div><i class="bi bi-pc-display me-1"></i><strong>Typ:</strong> @Model.Type</div>
<div><i class="bi bi-calendar-check me-1"></i><strong>Erstellt:</strong>
@Model.CreatedAt.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</div>
<div><i class="bi bi-clock me-1"></i><strong>Last-Seen:</strong>
@Model.LastSeen.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</div>
<div><i class="bi bi-cpu me-1"></i><strong>CPU:</strong> @(Model.CpuType ?? "not found") </div>
<div><i class="bi bi-cpu me-1"></i><strong>CPU-Kerne: </strong> @Model.CpuCores </div>
<div><i class="bi bi-gpu-card me-1"></i><strong>GPU:</strong> @(Model.GpuType ?? "not found")
</div> </div>
<div><i class="bi bi-memory me-1"></i><strong>RAM:</strong> @(Model.RamSize) </div>
<div><i class="bi bi-hdd me-1"></i><strong>Disk Space:</strong> ... </div> <div class="infocard row g-4 mb-4">
<div class="info col-6 text-text col-lg-3">
<div><i class="bi bi-globe me-1"></i><strong>IP:</strong> @Model.IPAddress</div>
<div><i class="bi bi-pc-display me-1"></i><strong>Typ:</strong> @Model.Type</div>
<div><i class="bi bi-calendar-check me-1"></i><strong>Erstellt:</strong>
@Model.CreatedAt.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</div>
<div><i class="bi bi-clock me-1"></i><strong>Last-Seen:</strong>
@Model.LastSeen.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</div>
</div>
<div class="hardware col-6 text-text col-lg-3">
<div><i class="bi bi-cpu me-1"></i><strong>CPU:</strong> @(Model.CpuType ?? "not found") </div>
<div><i class="bi bi-cpu me-1"></i><strong>CPU-Kerne: </strong> @Model.CpuCores </div>
<div><i class="bi bi-gpu-card me-1"></i><strong>GPU:</strong> @(Model.GpuType ?? "not found")
</div>
<div><i class="bi bi-memory me-1"></i><strong>RAM:</strong> @(Model.RamSize) </div>
<div><i class="bi bi-hdd me-1"></i><strong>Disk Space:</strong> ... </div>
</div>
<div class="hardware col-6 text-text col-lg-3">
<div class="card-footer text-end">
<a asp-action="EditServer" asp-route-id="@Model.Id" class="btn btn-outline-primary me-2">
<i class="bi bi-pencil"></i> Bearbeiten
</a>
<form asp-action="Delete" asp-route-id="@Model.Id" method="post" class="d-inline"
onsubmit="return confirm('Diesen Server wirklich löschen?');">
<button type="submit" class="btn btn-outline-danger">
<i class="bi bi-trash"></i> Löschen
</button>
</form>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="card-body"> <div class="mt-4">
<dl class="row mb-0"> <h6><i class="bi bi-graph-up me-1"></i>CPU Last</h6>
<dt class="col-sm-3">ID</dt> <div class="graphcontainer p-4 text-center text-muted">
<dd class="col-sm-9">@Model.Id</dd> <canvas class="graph" id="cpuUsageChart"></canvas>
</div>
<dt class="col-sm-3">IP-Adresse</dt>
<dd class="col-sm-9">@Model.IPAddress</dd>
<dt class="col-sm-3">Typ</dt>
<dd class="col-sm-9">@Model.Type</dd>
<dt class="col-sm-3">Erstellt am</dt>
<dd class="col-sm-9">@Model.CreatedAt.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</dd>
<dt class="col-sm-3">Zuletzt gesehen</dt>
<dd class="col-sm-9">@Model.LastSeen.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</dd>
</dl>
</div> </div>
<div class="card-footer text-end"> <div class="mt-4">
<a asp-action="EditServer" asp-route-id="@Model.Id" class="btn btn-outline-primary me-2"> <h6><i class="bi bi-graph-up me-1"></i>RAM Last</h6>
<i class="bi bi-pencil"></i> Bearbeiten <div class="graphcontainer p-4 text-center text-muted">
</a> <canvas class="graph" id="ramUsageChart"></canvas>
<form asp-action="Delete" asp-route-id="@Model.Id" method="post" class="d-inline" </div>
onsubmit="return confirm('Diesen Server wirklich löschen?');">
<button type="submit" class="btn btn-outline-danger">
<i class="bi bi-trash"></i> Löschen
</button>
</form>
</div> </div>
</div> <div class="mt-4">
<h6><i class="bi bi-graph-up me-1"></i>GPU Last</h6>
<div class="mt-4"> <div class="graphcontainer p-4 text-center text-text">
<h6><i class="bi bi-graph-up me-1"></i>CPU Last</h6> <canvas class="graph" id="gpuUsageChart"></canvas>
<div class="bg-light border rounded p-4 text-center text-muted" style="height: 500px; width: 100%"> </div>
<canvas id="cpuUsageChart" style="width: 800px; height: 400px; border: 1px solid red;"></canvas>
</div> </div>
</div>
</div> </div>
<h6><i class="bi bi-graph-up me-1"></i>RAM Last</h6>
<div class="bg-light border rounded p-4 text-center text-muted" style="height: 500px; width: 100%">
<canvas id="ramUsageChart" style="width: 800px; height: 400px; border: 1px solid red;"></canvas>
</div>
</div>
<div class="mt-4"></div>
<h6><i class="bi bi-graph-up me-1"></i>GPU Last</h6>
<div class="bg-light border rounded p-4 text-center text-muted" style="height: 500px; width: 100%">
<canvas id="gpuUsageChart" style="width: 800px; height: 400px; border: 1px solid red;"></canvas>
</div>
</div>
</div>
</div>
@section Scripts { @section Scripts {
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@@ -106,7 +94,6 @@
datasets: [{ datasets: [{
label: 'CPU Last (%)', label: 'CPU Last (%)',
data: [], data: [],
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.2)', backgroundColor: 'rgba(255, 99, 132, 0.2)',
fill: true, fill: true,
tension: 0.3, tension: 0.3,
@@ -127,7 +114,7 @@
}, },
x: { x: {
title: { title: {
display: true, display: false,
text: 'Zeit' text: 'Zeit'
} }
} }
@@ -142,7 +129,6 @@
datasets: [{ datasets: [{
label: 'RAM Last (%)', label: 'RAM Last (%)',
data: [], data: [],
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.2)', backgroundColor: 'rgba(255, 99, 132, 0.2)',
fill: true, fill: true,
tension: 0.3, tension: 0.3,
@@ -158,12 +144,12 @@
max: 100, max: 100,
title: { title: {
display: true, display: true,
text: 'Prozent' text: 'Auslastung in %'
} }
}, },
x: { x: {
title: { title: {
display: true, display: false,
text: 'Zeit' text: 'Zeit'
} }
} }
@@ -178,7 +164,6 @@
datasets: [{ datasets: [{
label: 'GPU Last (%)', label: 'GPU Last (%)',
data: [], data: [],
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.2)', backgroundColor: 'rgba(255, 99, 132, 0.2)',
fill: true, fill: true,
tension: 0.3, tension: 0.3,
@@ -194,12 +179,12 @@
max: 100, max: 100,
title: { title: {
display: true, display: true,
text: 'Prozent' text: 'Auslastung in %'
} }
}, },
x: { x: {
title: { title: {
display: true, display: false,
text: 'Zeit' text: 'Zeit'
} }
} }

View File

@@ -4,31 +4,36 @@
ViewData["Title"] = "Server bearbeiten"; ViewData["Title"] = "Server bearbeiten";
} }
<head>
<link rel="stylesheet" href="~/css/main.css" />
<link rel="stylesheet" href="~/css/server-edit.css" />
</head>
<h2 class="mb-4">Server bearbeiten</h2> <h2 class="mb-4">Server bearbeiten</h2>
<form asp-action="EditServer" asp-controller="Server" method="post"> <form asp-action="EditServer" asp-controller="Server" method="post">
@Html.AntiForgeryToken() @Html.AntiForgeryToken()
<input type="hidden" asp-for="Id" /> <input type="hidden" asp-for="Id" />
<div class="card mb-4"> <div class="card mb-4 g-4">
<div class="card-header"> <div class="card-header">
<h4 class="mb-0">Allgemeine Informationen</h4> <h4 class="mb-0">Allgemeine Informationen</h4>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="mb-3"> <div class="mb-3">
<label asp-for="Name" class="form-label"></label> <label asp-for="Name" class="form-label">Name</label>
<input asp-for="Name" class="form-control" /> <input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span> <span asp-validation-for="Name" class="text-danger"></span>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label asp-for="IPAddress" class="form-label"></label> <label asp-for="IPAddress" class="form-label">IP-Adresse</label>
<input asp-for="IPAddress" class="form-control" /> <input asp-for="IPAddress" class="form-control" />
<span asp-validation-for="IPAddress" class="text-danger"></span> <span asp-validation-for="IPAddress" class="text-danger"></span>
</div> </div>
<div class="mb-4"> <div class="mb-4">
<label asp-for="Type" class="form-label"><i class="bi bi-hdd-network me-1"></i>Typ</label> <label asp-for="Type" class="form-label">Typ</label>
<select asp-for="Type" class="form-select"> <select asp-for="Type" class="form-select">
<option>VPS</option> <option>VPS</option>
<option>VM</option> <option>VM</option>
@@ -176,6 +181,6 @@
<div class="d-flex justify-content-end gap-2"> <div class="d-flex justify-content-end gap-2">
<button type="submit" class="btn btn-primary"><i class="bi bi-save me-1"></i>Speichern</button> <button type="submit" class="btn btn-primary"><i class="bi bi-save me-1"></i>Speichern</button>
<a asp-action="Overview" class="btn btn-secondary"><i class="bi bi-x-circle me-1"></i>Abbrechen</a> <a asp-action="Overview" class="btn btn-danger"><i class="bi bi-x-circle me-1"></i>Abbrechen</a>
</div> </div>
</form> </form>

View File

@@ -85,7 +85,7 @@
</li> </li>
--> -->
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/User/UserSettings">Einstellungen</a> <a class="nav-link" href="/System/Settings">Einstellungen</a>
</li> </li>
</ul> </ul>
</div> </div>

View File

@@ -8,9 +8,11 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Login</title> <title>@ViewData["Title"] - Login</title>
<link rel="stylesheet" href="~/css/main.css" />
<link rel="stylesheet" href="~/css/Login.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" />
</head> </head>
<body class="bg-light d-flex align-items-center justify-content-center" style="min-height: 100vh;"> <body class="d-flex align-items-center justify-content-center" style="min-height: 100vh;">
<div class="container"> <div class="container">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6"> <div class="col-md-6">

View File

@@ -2,54 +2,24 @@
ViewData["Title"] = "Settings"; ViewData["Title"] = "Settings";
var pictureUrl = User.Claims.FirstOrDefault(c => c.Type == "picture")?.Value ?? ""; var pictureUrl = User.Claims.FirstOrDefault(c => c.Type == "picture")?.Value ?? "";
var preferredUsername = User.Claims.FirstOrDefault(c => c.Type == "preferred_username")?.Value ?? "admin"; var preferredUsername = User.Claims.FirstOrDefault(c => c.Type == "preferred_username")?.Value ?? "admin";
var isLocalUser = ViewBag.IdentityProvider == "local";
var DbEngine = ViewBag.DbProvider; var DbEngine = ViewBag.DbProvider;
var mail = ViewBag.mail; var mail = ViewBag.mail;
var ServerVersion = ViewBag.ServerVersion;
} }
<head> <head>
<link rel="stylesheet" href="~/css/site.css" /> <link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/user-settings.css" /> <link rel="stylesheet" href="~/css/settings.css" />
</head> </head>
<div class="Settingscontainer"> <div class="Settingscontainer">
@if (isLocalUser)
{
<div class="card shadow mt-5 p-4" style="width: 40%; margin: auto;">
<h4><i class="bi bi-pencil-square me-2"></i>Benutzerdaten ändern</h4>
<form asp-action="Edit" method="post" asp-controller="User">
<div class="mb-3">
<label for="Username" class="form-label">Neuer Benutzername</label>
<input type="text" class="form-control" id="Username" name="Username" value="@preferredUsername" />
</div>
<div class="mb-3">
<label for="NewPassword" class="form-label">Neues Passwort</label>
<input type="password" class="form-control" id="NewPassword" name="NewPassword" />
</div>
<div class="mb-3">
<label for="ConfirmPassword" class="form-label">Passwort bestätigen</label>
<input type="password" class="form-control" id="ConfirmPassword" name="ConfirmPassword" />
</div>
<button type="submit" class="btn btn-db">
<i class="bi bi-save me-1"></i>Speichern
</button>
</form>
</div>
}
else
{
<div class="alert alert-info mt-4 text-center" style="width: 40%; margin: auto;">
<i class="bi bi-info-circle me-1"></i>Benutzerdaten können nur für lokal angemeldete Nutzer geändert werden.
</div>
}
<div class="card shadow mt-5 p-4" style="width: 55%; margin: auto;"> <div class="card shadow mt-5 p-4" style="width: 55%; margin: auto;">
<h4><i class="bi bi-pencil-square me-2"></i>Systemeinformationen</h4> <h4><i class="bi bi-pencil-square me-2"></i>Systemeinformationen</h4>
<br> <br>
<h5>Watcher Version: v0.1.0</h5> <h5>Watcher Version: @ServerVersion</h5>
<hr class="my-4" /> <hr class="my-4" />

View File

@@ -89,6 +89,29 @@
</tbody> </tbody>
</table> </table>
<div class="card shadow mt-5 p-4" style="width: 100%; margin: auto;">
<h4><i class="bi bi-pencil-square me-2"></i>Benutzerdaten ändern</h4>
<form asp-action="Edit" method="post" asp-controller="User">
<div class="mb-3">
<label for="Username" class="form-label">Neuer Benutzername</label>
<input type="text" class="form-control" id="Username" name="Username" value="@preferredUsername" />
</div>
<div class="mb-3">
<label for="NewPassword" class="form-label">Neues Passwort</label>
<input type="password" class="form-control" id="NewPassword" name="NewPassword" />
</div>
<div class="mb-3">
<label for="ConfirmPassword" class="form-label">Passwort bestätigen</label>
<input type="password" class="form-control" id="ConfirmPassword" name="ConfirmPassword" />
</div>
<button type="submit" class="btn btn-db">
<i class="bi bi-save me-1"></i>Speichern
</button>
</form>
</div>
<div> <div>
<form method="post" asp-controller="Auth" asp-action="Logout" class="text-center mt-4"> <form method="post" asp-controller="Auth" asp-action="Logout" class="text-center mt-4">
<button type="submit" class="btn btn-danger"> <button type="submit" class="btn btn-danger">

View File

@@ -0,0 +1,24 @@
.login-card {
background-color: var(--color-surface);
color: var(--color-text);
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
max-width: 500px;
margin: auto;
}
.btn-oidc {
background-color: var(--color-primary);
color: white;
border: none;
}
.btn-oidc:hover {
background-color: var(--color-primary);
}
.form-error {
color: #ff6b6b;
font-size: 0.875rem;
}

View File

@@ -0,0 +1,13 @@
.dumptable {
width: 100%;
border: .2rem solid;
margin: 1rem;
padding: 1rem
}
.dumptable thead {
margin: 1rem;
border: .2rem solid;
}

View File

@@ -1,12 +1,13 @@
:root { :root {
--color-bg: #141414; --color-bg: #141414;
--color-surface: #212121; --color-surface: #212121;
--color-accent: #415a77; --color-accent: #00e5ff;
--color-primary: #616161; --color-primary: #616161;
--color-text: #f9feff; --color-text: #f9feff;
--color-muted: #c0c0c0; --color-muted: #c0c0c0;
--color-success: #14a44d; --color-success: #14a44d;
--color-danger: #ff6b6b; --color-danger: #ff6b6b;
--color-warning: #CBE013;
} }
body { body {
@@ -25,7 +26,12 @@ a {
} }
.form-control { .form-control {
background-color: var(--color-accent); background-color: var(--color-muted);
color: var(--color-text);
}
.form-control:active {
background-color: var(--color-muted);
color: var(--color-text); color: var(--color-text);
} }
@@ -39,24 +45,19 @@ a {
} }
.btn-primary { .btn-primary {
background-color: var(--color-primary); background-color: var(--color-accent);
border: none; border: none;
} }
.btn-primary:hover {
background-color: var(--color-accent);
}
.btn-danger { .btn-danger {
background-color: var(--color-danger); background-color: var(--color-danger);
border: none; border: none;
} }
.btn-pocketid {
background-color: var(--color-success);
color: white;
}
.btn-pocketid:hover {
background-color: #0f8c3c;
}
.table { .table {
color: var(--color-text); color: var(--color-text);
} }

View File

@@ -0,0 +1,20 @@
.info {
margin: 2rem;
margin-top: 3rem;
}
.hardware {
margin: 2rem;
margin-top: 3rem;
}
.graphcontainer {
height: 25rem;
width: 100%;
background-color: var(--color-surface);
}
.graph {
width: 100%;
height: 22rem;
}

View File

View File

@@ -13,3 +13,27 @@
background-color: var(--color-surface); background-color: var(--color-surface);
color: var(--color-text); color: var(--color-text);
} }
.Settingscontainer {
display: flex;
flex-wrap: wrap;
/* Wichtig: erlaubt Umbruch */
gap: 1rem;
/* optionaler Abstand */
}
.Settingscontainer>* {
flex: 1 1 calc(50% - 0.5rem);
/* 2 Elemente pro Zeile, inkl. Gap */
box-sizing: border-box;
}
.btn-db {
background-color: var(--color-primary);
border: none;
}
.btn-db:hover {
background-color: var(--color-accent);
border: none;
}