smueller/Ceph-Calculator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Erstelle die Grundstruktur für die Ceph Max Storage Rechner-Anwendung mit Flask und HTMX. Füge Konfigurationsdateien, Routen, Modelle, Templates und statische Dateien hinzu. Implementiere grundlegende Funktionen zur Berechnung der Speichernutzung und zur PDF-Generierung. Integriere CSRF-Schutz und Logging. Stelle sicher, dass die Anwendung modular und wartbar ist.

Browse Source
This commit is contained in:
Samuel Müller
2025-03-26 08:40:32 +01:00
commit f00c1f48e9
26 changed files with 1744 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
app/static/css/styles.css Normal file
View File

@ -0,0 +1,104 @@
/* Zusätzliche Stile für den Ceph-Rechner */
/* Sanfter Farbübergang im Hintergrund */
body {
background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
}
/* Grundlegende Formular-Styles */
.form-control, input, select, textarea {
background-color: #ffffff !important;
border: 1px solid #e2e8f0 !important;
color: #2d3748 !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
background-color: #ffffff !important;
border-color: #4299e1 !important;
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.25) !important;
}
.form-control::placeholder, input::placeholder, select::placeholder, textarea::placeholder {
color: #a0aec0 !important;
}
select option {
background-color: #ffffff !important;
color: #2d3748 !important;
}
/* Bessere Lesbarkeit für Ergebnisse */
.result-value {
font-variant-numeric: tabular-nums;
}
/* Hover-Effekte für Karten */
.card-hover {
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.card-hover:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
/* Light Mode Anpassungen */
@media (prefers-color-scheme: light) {
.form-control, input, select, textarea {
background-color: #ffffff !important;
border: 1px solid #e2e8f0 !important;
color: #2d3748 !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
background-color: #ffffff !important;
border-color: #4299e1 !important;
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.25) !important;
}
.form-control::placeholder, input::placeholder, select::placeholder, textarea::placeholder {
color: #a0aec0 !important;
}
select option {
background-color: #ffffff !important;
color: #2d3748 !important;
}
}
/* Darkmode Anpassungen */
@media (prefers-color-scheme: dark) {
body {
background: linear-gradient(135deg, #1a1a1a 0%, #2d3748 100%);
}
/* Eingabefelder im Darkmode */
.form-control, input, select, textarea {
background-color: #2d3748 !important;
border: 1px solid #4a5568 !important;
color: #e2e8f0 !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
background-color: #2d3748 !important;
border-color: #63b3ed !important;
box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.25) !important;
}
.form-control::placeholder, input::placeholder, select::placeholder, textarea::placeholder {
color: #718096 !important;
}
select option {
background-color: #2d3748 !important;
color: #e2e8f0 !important;
}
}
/* Responsive Anpassungen */
@media (max-width: 640px) {
.container {
padding-left: 1rem;
padding-right: 1rem;
}
}