sendnrw/hikos
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

unschön

Browse Source
This commit is contained in:
jbergner
2025-05-19 23:24:17 +02:00
parent f2227e4445
commit 07b6d25665
2 changed files with 260 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
static/css/main.css
View File

@@ -1,3 +1,55 @@
/* ---------- Local Web‑Fonts ---------- */
@font-face {
font-family: "Fira Code";
src: url("/static/fonts/FiraCode-VariableFont.woff2") format("woff2");
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("/static/fonts/InterVariable.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* ---------- Farbpalette ---------- */
:root {
/* Light theme */
--bg: #f5f7fa;
--bg-alt: #ffffff;
--card-bg: #ffffff;
--text: #000000;
--text-muted: #1f2933;
--accent: #2563eb; /* Indigo‑600 */
--accent-light: #3b82f6; /* Indigo‑500 */
--code-bg: #f1f5f9;
--code-border: #e2e8f0;
--radius: 0.75rem;
--gap: 2rem;
--shadow: 0 4px 16px rgba(0,0,0,.08);
font-size: 16px;
font-family: "Inter", system-ui, sans-serif;
color-scheme: light;
}
/* Dark mode (optional) */
@media (prefers-color-scheme: dark) {
:root {
--bg: #0d1117;
--bg-alt: #161b22;
--card-bg: #161b22;
--text: #ffffff;
--text-muted: #e4e8ec;
--accent: #3b82f6;
--accent-light:#60a5fa;
--code-bg: #1e242c;
--code-border: #30363d;
--shadow: 0 4px 16px rgba(0,0,0,.32);
}
}
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -7,6 +59,8 @@
body, html { body, html {
height: 100%; height: 100%;
width: 100%; width: 100%;
background: var(--bg);
color: var(--text);
} }
.container { .container {
@@ -29,44 +83,92 @@
height: 100%; height: 100%;
} }
.top { #bereich-a .top {
height: 80px; margin-top: 10px;
height: 35px;
display: grid; display: grid;
grid-template-columns: 50% 5% 7.5% 10%; width: 100%;
grid-template-columns: 68.96% 6.92% 10.34% 13.79%;
} }
.top > div { #bereich-a .top > div {
background-color: #ccc; /* Beispiel für Formularfelder */ background-color: var(--bg); /* Beispiel für Formularfelder */
} }
.bottom { #bereich-a .top input {
width: 100%; /* Das Textfeld nimmt die gesamte Breite der Spalte ein */
padding: 8px;
border: 1px solid #ddd;
border-radius: var(--radius); /* Abgerundete Ecken */
background-color: #fff;
font-size: 14px;
color: var(--text);
transition: all 0.3s ease; /* Für weiche Übergänge */
}
#bereich-a .top input::placeholder {
color: #aaa; /* Platzhalter in einer helleren Farbe */
font-style: italic;
}
#bereich-a .top input:focus {
border-color: var(--accent); /* Die Rahmenfarbe beim Fokus */
outline: none; /* Entfernt den Standard-Fokusrahmen */
}
#bereich-a .bottom {
flex-grow: 1; flex-grow: 1;
display: grid; background-color: var(--bg-alt); /* Beispiel für unteren Bereich */
grid-template-columns: 27.5% 7.5% 7.5% 7.5% 5% 7.5% 10%; padding: 0px;
} overflow: hidden; /* Verhindert, dass das untere Element aus dem Container herausragt */
.bottom > div {
background-color: #ddd; /* Beispiel für die Unterteile */
} }
#bereich-b .top { #bereich-b .top {
height: 80px; margin-top: 10px;
height: 35px;
display: grid; display: grid;
width: 100%;
grid-template-columns: 100%; grid-template-columns: 100%;
} }
#bereich-b .top > div { #bereich-b .top > div {
background-color: #bbb; /* Beispiel für Formularfelder */ background-color: var(--bg); /* Beispiel für Formularfelder */
}
#bereich-b .top input {
width: 100%; /* Das Textfeld nimmt die gesamte Breite der Spalte ein */
padding: 8px;
border: 1px solid #ddd;
border-radius: var(--radius); /* Abgerundete Ecken */
background-color: #fff;
font-size: 14px;
color: var(--text);
transition: all 0.3s ease; /* Für weiche Übergänge */
}
#bereich-b .top input::placeholder {
color: #aaa; /* Platzhalter in einer helleren Farbe */
font-style: italic;
}
#bereich-b .top input:focus {
border-color: var(--accent); /* Die Rahmenfarbe beim Fokus */
outline: none; /* Entfernt den Standard-Fokusrahmen */
} }
#bereich-b .bottom { #bereich-b .bottom {
flex-grow: 1; flex-grow: 1;
background-color: #f5f5f5; /* Beispiel für unteren Bereich */ background-color: var(--bg-alt); /* Beispiel für unteren Bereich */
padding: 0px;
overflow-y: auto; /* Ermöglicht vertikales Scrollen im unteren Bereich von Bereich B */
/*margin-top: 10px;*/ /* Abstand zwischen Top und Bottom */
} }
/* Tabelle */
table { table {
width: 100%; width: 100%;
border-collapse: collapse; /* Für eine saubere Darstellung */ border-collapse: collapse; /* Für eine saubere Darstellung */
table-layout: fixed; /* Die Breiten der Spalten werden strikt angewendet */
} }
th, td { th, td {
@@ -74,3 +176,12 @@
padding: 8px; padding: 8px;
text-align: center; /* Beispiel für Textzentrierung */ text-align: center; /* Beispiel für Textzentrierung */
} }
colgroup col {
background-color: var(--bg); /* Hintergrundfarbe als Beispiel */
}
table th, table td {
text-align: left;
}

71
static/templates/base.html
View File

@@ -13,10 +13,10 @@
<div class="container"> <div class="container">
<div id="bereich-a"> <div id="bereich-a">
<div class="top"> <div class="top">
<div>Formular 1</div> <!-- Entspricht der Breite der ersten 4 unteren Spalten --> <input type="text" placeholder="A 1" />
<div>Formular 2</div> <input type="text" placeholder="B 2" />
<div>Formular 3</div> <input type="text" placeholder="C 3" />
<div>Formular 4</div> <input type="text" placeholder="D 4" />
</div> </div>
<div class="bottom"> <div class="bottom">
<table> <table>
@@ -65,10 +65,69 @@
</div> </div>
<div id="bereich-b"> <div id="bereich-b">
<div class="top"> <div class="top">
<div>Formular 1</div> <input type="text" placeholder="E 5" />
</div> </div>
<div class="bottom"> <div class="bottom">
<div>Teil 1</div> <table>
<colgroup>
<col style="width: 100%">
</colgroup>
<thead>
<tr>
<th>Spalte 1</th>
</tr>
</thead>
<tbody>
<tr><td>Teil 1</td></tr>
<tr><td>Teil 2</td></tr>
<tr><td>Teil 1</td></tr>
<tr><td>Teil 2</td></tr>
<tr><td>Teil 1</td></tr>
<tr><td>Teil 2</td></tr>
<tr><td>Teil 1</td></tr>
<tr><td>Teil 2</td></tr>
<tr><td>Teil 1</td></tr>
<tr><td>Teil 2</td></tr>
<tr><td>Teil 1</td></tr>
<tr><td>Teil 2</td></tr>
<tr><td>Teil 1</td></tr>
<tr><td>Teil 2</td></tr>
<tr><td>Teil 1</td></tr>
<tr><td>Teil 2</td></tr>
<tr><td>Teil 1</td></tr>
<tr><td>Teil 2</td></tr>
<tr><td>Teil 1</td></tr>
<tr><td>Teil 2</td></tr>
<tr><td>Teil 1</td></tr>
<tr><td>Teil 2</td></tr>
<tr><td>Teil 1</td></tr>
<tr><td>Teil 2</td></tr>
<tr><td>Teil 1</td></tr>
<tr><td>Teil 2</td></tr>
<tr><td>Teil 1</td></tr>
<tr><td>Teil 2</td></tr>
<tr><td>Teil 1</td></tr>
<tr><td>Teil 2</td></tr>
<tr><td>Teil 1</td></tr>
<tr><td>Teil 2</td></tr>
<tr><td>Teil 1</td></tr>
<tr><td>Teil 2</td></tr>
<tr><td>Teil 1</td></tr>
<tr><td>Teil 2</td></tr>
<tr><td>Teil 1</td></tr>
<tr><td>Teil 2</td></tr>
<tr><td>Teil 1</td></tr>
<tr><td>Teil 2</td></tr>
<tr><td>Teil 1</td></tr>
<tr><td>Teil 2</td></tr>
<tr><td>Teil 1</td></tr>
<tr><td>Teil 2</td></tr>
<tr><td>Teil 1</td></tr>
<tr><td>Teil 2</td></tr>
<tr><td>Teil 1</td></tr>
<tr><td>Teil 2</td></tr>
</tbody>
</table>
</div> </div>
</div> </div>
</div> </div>