Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@Harrier-Du-Bois
Harrier-Du-Bois authored Oct 13, 2024
1 parent 105e500 commit 47f4c59
Showing 1 changed file with 52 additions and 28 deletions.
80 changes: 52 additions & 28 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@

h1 {
font-size: 20px;
margin: 5px 0 10px 0; /* Oben unten 5px, links rechts 0px Rand */
margin: 5px 0; /* Oben unten 5px, links rechts 0px Rand */
padding-left: 0; /* Padding links entfernen */
align-self: flex-start;
width: 100%;
Expand All @@ -41,15 +41,15 @@

table {
table-layout: fixed;
border-collapse: separate;
overflow: hidden;
margin: 0 auto;
margin-bottom: 20px;
border: 2px solid #444;
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-radius: 3px;
width: 100%;
max-width: 400px;
margin: 0 auto;
margin-bottom: 20px;
border: 2px solid #444;
}

th {
Expand All @@ -59,38 +59,47 @@
width: fit-content;
max-width: fit-content;
background-color: #444;
border: 1px solid #fd1212;
}

td {
padding: 5px 5px 5px 0px;
padding: 5px;
text-align: right;
width: fit-content;
width: 1%;
max-width: fit-content;
line-height: 1.5;
white-space: nowrap;
border: 1px solid #fd1212;
}

input[type="number"] {
font-size: 16px;
width: 60px;
width: 100%;
min-width: 20px;
max-width: 60px;
max-width: fit-content;
background-color: #444;
color: #fff;
border: 1px solid #555;
border-radius: 3px;
padding: 2px 2px;
text-align: center;
box-sizing: border-box;
text-indent: 0.01px;
}

select[type="percent"] {
font-size: 16px;
width: 65px;
max-width: 65;
width: 100%;
min-width: 20px;
max-width: 65px;
background-color: #444;
color: #fff;
border: 1px solid #555;
border-radius: 3px;
padding: 2px 2px;
text-align: center;
box-sizing: border-box;
text-indent: 0.01px;
text-overflow: '';
/* DD-Pfeil entfernen */
Expand All @@ -104,17 +113,17 @@
}

.optimal-result {
width: 165px;
max-width: fit-content;
width: fit-content;
max-width: 180px;
background-color: #444;
padding-right: 10px;
text-align: right;
font-weight: bold;
padding-right: 10px;
}

.result {
width: 65px;
max-width: fit-content;
width: fit-content;
max-width: 65px;
font-weight: bold;
text-align: right;
background-color: #444;
Expand All @@ -133,7 +142,7 @@
padding: 20px;
font-size: 16px;
width: 100%;
max-width: 600px;
max-width: 400px;
background-color: #444;
color: white;
border: none;
Expand All @@ -143,11 +152,11 @@

.copyright {
width: 100%;
max-width: 600px;
max-width: 400px;
padding: 0 5px;
box-sizing: border-box;
text-align: center;
margin-top: 15px;
margin-top: 5px;
font-size: 12px;
color: #888;
}
Expand All @@ -158,10 +167,16 @@
<div class="table-container">
<h1>Telerechner</h1>
<table>
<colgroup>
<col style="width: 37%;">
<col style="width: 21%;">
<col style="width: 21%;">
<col style="width: 21%;">
</colgroup>
<tr>
<th class=" firstcol">Eingabe</th>
<th>Vormonat</th>
<th>akt. Monat</th>
<th>Monat 1</th>
<th>Monat 2</th>
<th class="result">Gesamt</th>
</tr>
<tr>
Expand Down Expand Up @@ -193,15 +208,19 @@ <h1>Telerechner</h1>
</div>
<div class="table-container">
<table>
<colgroup>
<col style="width: 40%;">
<col style="width: 20%;">
<col style="width: 40%;">
</colgroup>
<tr>
<th class=" firstcol">Grundwerte</th>
<th style="width: 70px; max-width: 70px;"></th>
<th class="optimal-result" colspan="2">akt. Monat Optimum</th>
<th class="optimal-result">Monat 2 Optimum</th>
</tr>
<tr>
<td class=" firstcol">tägl. Arbeitszeit</td>
<td><input type="number" id="normalDailyHours" value="8.01" step="0.01" min="0"></td>
<td class="optimal-result" style="padding: 0;">Office:</td>
<td id="prHours2" class="optimal-result"></td>
</tr>
<tr>
Expand All @@ -212,7 +231,6 @@ <h1>Telerechner</h1>
<option value="80">80%</option>
</select>
</td>
<td class="optimal-result" style="padding: 0;">Tele:</td>
<td id="telHours2" class="optimal-result"></td>
</tr>
</table>
Expand Down Expand Up @@ -279,8 +297,8 @@ <h1>Telerechner</h1>
const optimalPrHours2 = Math.max(0, expectedTotalHours2 - optimalTelHours2);

// Monat 2 span Elemente mit Optimalwerten updaten
document.getElementById('prHours2').textContent = formatNumber(optimalPrHours2) + 'h';
document.getElementById('telHours2').textContent = formatNumber(optimalTelHours2) + 'h';
document.getElementById('prHours2').textContent = 'Office: ' + formatNumber(optimalPrHours2) + 'h';
document.getElementById('telHours2').textContent = 'Tele: ' + formatNumber(optimalTelHours2) + 'h';

const prHours2 = optimalPrHours2;
const telHours2 = optimalTelHours2;
Expand All @@ -307,6 +325,12 @@ <h1>Telerechner</h1>

// Resultate updaten
const resultsHtml = `
<colgroup>
<col style="width: 37%;">
<col style="width: 21%;">
<col style="width: 21%;">
<col style="width: 21%;">
</colgroup>
<tr>
<td class=" firstcol">Regelarbeitszeit</td>
<td>${formatNumber(expectedTotalHours1)}h</td>
Expand Down Expand Up @@ -342,8 +366,8 @@ <h1>Telerechner</h1>
document.getElementById('resultsTable').innerHTML = `
<tr>
<th class=" firstcol">Resultat</th>
<th>Vormonat</th>
<th>akt. Monat</th>
<th>Monat 1</th>
<th>Monat 2</th>
<th class="result">Gesamt</th>
</tr>
${resultsHtml}
Expand Down

0 comments on commit 47f4c59

Please sign in to comment.