Notenrechner: Verbesserte Progressbars mit Farbvisualisierung und Animationen
This commit is contained in:
parent
8eec0e06d9
commit
fab4cc3fa5
2 changed files with 186 additions and 16 deletions
134
css/style.css
134
css/style.css
|
|
@ -932,33 +932,116 @@ textarea {
|
||||||
margin-top: 1.5rem;
|
margin-top: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Enhanced Progress Bar Container */
|
||||||
|
.progress-bar-container-enhanced {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.progress-bar-background {
|
.progress-bar-background {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 30px;
|
height: 40px;
|
||||||
background: rgba(255, 192, 203, 0.2);
|
background: rgba(255, 192, 203, 0.2);
|
||||||
border: 2px solid rgba(255, 105, 180, 0.2);
|
border: 2px solid rgba(255, 105, 180, 0.2);
|
||||||
border-radius: 8px;
|
border-radius: 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.8rem;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-bar-fill {
|
.progress-bar-fill {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
transition: width 0.5s ease, background-color 0.3s ease;
|
transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: flex-end;
|
||||||
|
padding-right: 10px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.85rem;
|
||||||
color: white;
|
color: white;
|
||||||
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 10px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-text {
|
||||||
|
display: inline-block;
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-labels {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: #b8659c;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-text {
|
.progress-text {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #6b3a5f;
|
color: #6b3a5f;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 0.9rem;
|
font-size: 0.95rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-emoji {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mini Progress Bar für Multiple Notes */
|
||||||
|
.mini-progress-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.8rem;
|
||||||
|
margin-top: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-progress-bar-bg {
|
||||||
|
flex: 1;
|
||||||
|
height: 20px;
|
||||||
|
background: rgba(255, 192, 203, 0.2);
|
||||||
|
border: 1px solid rgba(255, 105, 180, 0.2);
|
||||||
|
border-radius: 6px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-progress-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-progress-percent {
|
||||||
|
min-width: 45px;
|
||||||
|
text-align: right;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: #6b3a5f;
|
||||||
|
background: rgba(255, 192, 203, 0.15);
|
||||||
|
padding: 0.2rem 0.6rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Result Details with Bar */
|
||||||
|
.result-details-with-bar {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Grades Container DOM */
|
/* Grades Container DOM */
|
||||||
|
|
@ -1205,6 +1288,11 @@ textarea {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.average-percent-dom:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.average-note-dom {
|
.average-note-dom {
|
||||||
|
|
@ -1212,6 +1300,38 @@ textarea {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Average Progress Bar */
|
||||||
|
.average-progress-bar {
|
||||||
|
width: 100%;
|
||||||
|
height: 35px;
|
||||||
|
background: rgba(255, 192, 203, 0.2);
|
||||||
|
border: 2px solid rgba(255, 105, 180, 0.2);
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 1rem 0;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.average-progress-bg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.average-progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 700;
|
||||||
|
color: white;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
.average-details-dom {
|
.average-details-dom {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
color: #b8659c;
|
color: #b8659c;
|
||||||
|
|
|
||||||
|
|
@ -266,18 +266,53 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Aktualisiert die Progressbar
|
* Aktualisiert die Progressbar mit farbiger Visualisierung
|
||||||
*/
|
*/
|
||||||
function updateProgressBar(percent, color) {
|
function updateProgressBar(percent, color) {
|
||||||
simpleProgressBar.style.display = 'block';
|
simpleProgressBar.style.display = 'block';
|
||||||
|
|
||||||
|
// Bestimme die Hintergrundfarbe basierend auf der Note
|
||||||
|
let bgColor = color;
|
||||||
|
let bgOpacity = 0.2;
|
||||||
|
|
||||||
simpleProgressBar.innerHTML = `
|
simpleProgressBar.innerHTML = `
|
||||||
<div class="progress-bar-background">
|
<div class="progress-bar-container-enhanced">
|
||||||
<div class="progress-bar-fill" style="width: ${percent}%; background-color: ${color};"></div>
|
<div class="progress-bar-background" style="background-color: rgba(${hexToRgb(color)}, ${bgOpacity});">
|
||||||
|
<div class="progress-bar-fill" style="width: ${percent}%; background-color: ${color}; box-shadow: 0 0 15px ${color};">
|
||||||
|
<span class="progress-bar-text">${percent}%</span>
|
||||||
</div>
|
</div>
|
||||||
<p class="progress-text">${percent}% Complete</p>
|
</div>
|
||||||
|
<div class="progress-bar-labels">
|
||||||
|
<span class="label-0">0%</span>
|
||||||
|
<span class="label-25">25%</span>
|
||||||
|
<span class="label-50">50%</span>
|
||||||
|
<span class="label-75">75%</span>
|
||||||
|
<span class="label-100">100%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="progress-text">
|
||||||
|
<span class="progress-emoji">📊</span>
|
||||||
|
Fortschritt: <strong>${percent}%</strong> –
|
||||||
|
<span style="color: ${color}; font-weight: bold;">Sehr Gut Bereich</span>
|
||||||
|
</p>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Konvertiert Hex-Farben zu RGB für rgba()
|
||||||
|
*/
|
||||||
|
function hexToRgb(hex) {
|
||||||
|
// Entfernt das # Zeichen
|
||||||
|
hex = hex.replace('#', '');
|
||||||
|
|
||||||
|
// Konvertiert zu RGB
|
||||||
|
const r = parseInt(hex.substring(0, 2), 16);
|
||||||
|
const g = parseInt(hex.substring(2, 4), 16);
|
||||||
|
const b = parseInt(hex.substring(4, 6), 16);
|
||||||
|
|
||||||
|
return `${r}, ${g}, ${b}`;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Neue Grade-Input-Zeile hinzufügen (Multiple)
|
* Neue Grade-Input-Zeile hinzufügen (Multiple)
|
||||||
*/
|
*/
|
||||||
|
|
@ -376,15 +411,25 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Einzelnoten anzeigen
|
// Einzelnoten anzeigen mit Progressbars
|
||||||
let resultHTML = '<div class="results-list"><h4>📊 Ihre Noten:</h4>';
|
let resultHTML = '<div class="results-list"><h4>📊 Ihre Noten:</h4>';
|
||||||
noten.forEach((note, index) => {
|
noten.forEach((note, index) => {
|
||||||
resultHTML += `
|
resultHTML += `
|
||||||
<div class="result-item-dom">
|
<div class="result-item-dom">
|
||||||
<span class="result-number">#${index + 1}</span>
|
<span class="result-number">#${index + 1}</span>
|
||||||
<span class="result-details">${note.punkte} / ${note.maxPunkte} (${note.prozent}%)</span>
|
<div class="result-details-with-bar">
|
||||||
|
<div class="result-top">
|
||||||
|
<span class="result-details">${note.punkte} / ${note.maxPunkte}</span>
|
||||||
<span class="result-grade-dom" style="color: ${note.color};">${note.note}</span>
|
<span class="result-grade-dom" style="color: ${note.color};">${note.note}</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="mini-progress-bar">
|
||||||
|
<div class="mini-progress-bar-bg">
|
||||||
|
<div class="mini-progress-bar-fill" style="width: ${note.prozent}%; background-color: ${note.color}; box-shadow: 0 0 8px ${note.color};"></div>
|
||||||
|
</div>
|
||||||
|
<span class="mini-progress-percent">${note.prozent}%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
`;
|
`;
|
||||||
});
|
});
|
||||||
resultHTML += '</div>';
|
resultHTML += '</div>';
|
||||||
|
|
@ -410,10 +455,15 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
<div class="average-box-dom">
|
<div class="average-box-dom">
|
||||||
<h4>📈 Durchschnitt:</h4>
|
<h4>📈 Durchschnitt:</h4>
|
||||||
<div class="average-display-dom">
|
<div class="average-display-dom">
|
||||||
<div class="average-percent-dom">${durchschnittProzent}%</div>
|
<div class="average-percent-dom" style="border: 3px solid ${durchschnittColor}; box-shadow: 0 0 20px ${durchschnittColor};">${durchschnittProzent}%</div>
|
||||||
<div class="average-note-dom" style="color: ${durchschnittColor};">${durchschnittNote}</div>
|
<div class="average-note-dom" style="color: ${durchschnittColor};">${durchschnittNote}</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="average-details-dom">Von ${noten.length} Note(n)</p>
|
<div class="average-progress-bar">
|
||||||
|
<div class="average-progress-bg">
|
||||||
|
<div class="average-progress-fill" style="width: ${durchschnittProzent}%; background-color: ${durchschnittColor}; box-shadow: 0 0 15px ${durchschnittColor};"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="average-details-dom">Von ${noten.length} Note(n) – Durchschnitt: <strong>${durchschnittProzent}%</strong></p>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue