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;
}

203
static/templates/base.html
View File

@@ -1,77 +1,136 @@
{{ define "layout" }} {{ define "layout" }}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="HiKoS"> <meta name="description" content="HiKoS">
<title>HiKoS</title> <title>HiKoS</title>
<link rel="icon" type="image/vnd.icon" href="/static/img/favicon.ico"> <link rel="icon" type="image/vnd.icon" href="/static/img/favicon.ico">
<link rel="stylesheet" href="/static/css/main.css"> <link rel="stylesheet" href="/static/css/main.css">
</head> </head>
<body> <body>
<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>
<colgroup> <colgroup>
<col style="width: 27.5%"> <col style="width: 27.5%">
<col style="width: 7.5%"> <col style="width: 7.5%">
<col style="width: 7.5%"> <col style="width: 7.5%">
<col style="width: 7.5%"> <col style="width: 7.5%">
<col style="width: 5%"> <col style="width: 5%">
<col style="width: 7.5%"> <col style="width: 7.5%">
<col style="width: 10%"> <col style="width: 10%">
</colgroup> </colgroup>
<thead> <thead>
<tr> <tr>
<th>Spalte 1</th> <th>Spalte 1</th>
<th>Spalte 2</th> <th>Spalte 2</th>
<th>Spalte 3</th> <th>Spalte 3</th>
<th>Spalte 4</th> <th>Spalte 4</th>
<th>Spalte 5</th> <th>Spalte 5</th>
<th>Spalte 6</th> <th>Spalte 6</th>
<th>Spalte 7</th> <th>Spalte 7</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>Teil 1</td> <td>Teil 1</td>
<td>Teil 2</td> <td>Teil 2</td>
<td>Teil 3</td> <td>Teil 3</td>
<td>Teil 4</td> <td>Teil 4</td>
<td>Teil 5</td> <td>Teil 5</td>
<td>Teil 6</td> <td>Teil 6</td>
<td>Teil 7</td> <td>Teil 7</td>
</tr> </tr>
<tr> <tr>
<td>Teil 8</td> <td>Teil 8</td>
<td>Teil 9</td> <td>Teil 9</td>
<td>Teil 10</td> <td>Teil 10</td>
<td>Teil 11</td> <td>Teil 11</td>
<td>Teil 12</td> <td>Teil 12</td>
<td>Teil 13</td> <td>Teil 13</td>
<td>Teil 14</td> <td>Teil 14</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</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>
</div> <colgroup>
</div> <col style="width: 100%">
</div> </colgroup>
</body> <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>
</body>
</html> </html>
{{ end }} {{ end }}