ee0ce7fcff
- Moved result display outside tabs for unified experience - Fixed dropdown disappearing issue in personas - Implemented mapping-files system in personas.yml - Cleaned up personas.yml structure (removed unused fields) - Updated ausbildung-value codes (AUSBILDUNG/HS/LA) - Enhanced markdown rendering with proper link support - Fixed path resolution for Bundeslaender content - Improved tab persistence and content reset functionality - Added proper marginal sidebar support for both tabs - Streamlined HTML structure and removed duplicate elements
128 lines
5.1 KiB
HTML
128 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Werde Informatiklehrerin - Beratungstool</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="Steuerungsdateien/fonts.css">
|
|
<link rel="stylesheet" href="Steuerungsdateien/styles.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/dist/js-yaml.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="tab-buttons">
|
|
<button class="button-tab active" onclick="showTab('tab1')">Personas</button>
|
|
<button class="button-tab" onclick="showTab('tab2')">Finder</button>
|
|
</div>
|
|
|
|
<!-- Personas Tab -->
|
|
<div class="tab tab1 active">
|
|
<div class="personas-tableau">
|
|
<div class="focus personas-portrait">
|
|
<!-- Portrait detail -->
|
|
<div class="portrait-left">
|
|
<img id="persona-image" src="Steuerungsdateien/images/WIL-Vorbild_Birgit.png" alt="Birgit" />
|
|
</div>
|
|
<div class="info-right">
|
|
<div class="persona-head">
|
|
<h2 id="persona-name">Birgit <span class="meta">49 Jahre</span></h2>
|
|
<span id="persona-title" class="subline">Fachinformatikerin für Systemintegration</span>
|
|
</div>
|
|
<div class="text">
|
|
<p id="persona-text">Birgit aus {{BUNDESLAND_SELECT}} hat direkt nach ihrer Ausbildung zur Fachinformatikerin für Systemintegration angefangen zu arbeiten. Mittlerweile verfügt Birgit über langjährige {{AUSBILDUNG_SELECT}} im IT-Bereich. Schon länger spielt sie mit dem Gedanken, etwas Neues auszuprobieren - sie möchte unbedingt nochmal Erfahrungen in einem Job mit tieferem Sinn machen, etwas bewirken und ihren Wissensschatz an die junge Generation weitergeben. Sie fragt sich, ob dies noch möglich ist.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="persona-list" id="persona-list">
|
|
<!-- Portraits Liste -->
|
|
<div class="persona" data-name="birgit"><img src="Steuerungsdateien/images/WIL-Vorbild_Birgit.png"><span>Birgit</span></div>
|
|
<div class="persona" data-name="swantje"><img src="Steuerungsdateien/images/WIL-Vorbild_Swantje.png"><span>Swantje</span></div>
|
|
<div class="persona" data-name="ecem"><img src="Steuerungsdateien/images/WIL-Vorbild-Ecem.png"><span>Ecem</span></div>
|
|
<div class="persona" data-name="aminata"><img src="Steuerungsdateien/images/WIL-Vorbild_Aminata.png"><span>Aminata</span></div>
|
|
<div class="persona" data-name="sabrina"><img src="Steuerungsdateien/images/WIL-Vorbild_Sabrina.png"><span>Sabrina</span></div>
|
|
<div class="persona" data-name="mandy"><img src="Steuerungsdateien/images/WIL-Vorbild_Mandy.png"><span>Mandy</span></div>
|
|
<div class="persona" data-name="zoe"><img src="Steuerungsdateien/images/WIL-Vorbild_Zoe.png"><span>Zoe</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Finder Tab -->
|
|
<div class="tab tab2">
|
|
<form id="selectionForm">
|
|
<div id="dynamic-steps"></div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Result-Bereich für beide Tabs (Finder + Personas) -->
|
|
<div id="result" class="result-container" style="display: none;">
|
|
<div class="result-header">
|
|
<h2 id="finder-headline">Ihre Empfehlung</h2>
|
|
</div>
|
|
<div class="result-content">
|
|
<div id="finder-text-content"></div>
|
|
<div id="finder-tags" class="tags"></div>
|
|
<div id="finder-marginal" class="marginal"></div>
|
|
</div>
|
|
</div>
|
|
<script src="Steuerungsdateien/personas.js"></script>
|
|
<script src="Steuerungsdateien/finder.js"></script>
|
|
|
|
<script>
|
|
// Tabs anzeigen
|
|
function showTab(tabId) {
|
|
// Alle Tabs deaktivieren
|
|
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
|
document.querySelectorAll('.button-tab').forEach(btn => btn.classList.remove('active'));
|
|
|
|
// Aktiven Tab aktivieren
|
|
document.querySelector(`.${tabId}`).classList.add('active');
|
|
document.querySelector(`.button-tab[onclick*="${tabId}"]`).classList.add('active');
|
|
|
|
// Texte zurücksetzen
|
|
resetAllContent();
|
|
|
|
// Tab-spezifische Initialisierung
|
|
if (tabId === 'tab1') {
|
|
showPersonasTab();
|
|
} else if (tabId === 'tab2') {
|
|
loadFinderStructure();
|
|
}
|
|
}
|
|
|
|
// Setzt alle Inhalte zurück
|
|
function resetAllContent() {
|
|
// Persona-Empfehlungen zurücksetzen (nicht mehr benötigt)
|
|
|
|
// Finder-Ergebnisse zurücksetzen
|
|
const finderResult = document.getElementById('result');
|
|
if (finderResult) {
|
|
finderResult.style.display = 'none';
|
|
}
|
|
|
|
// Alle Inhalte leeren
|
|
const elementsToClear = [
|
|
'persona-headline', 'persona-text-content', 'persona-tags',
|
|
'finder-headline', 'finder-text-content', 'finder-tags', 'finder-marginal'
|
|
];
|
|
|
|
elementsToClear.forEach(id => {
|
|
const element = document.getElementById(id);
|
|
if (element) {
|
|
element.innerHTML = '';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Initialisiere die Anwendung
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Personas werden automatisch geladen durch personas.js
|
|
// Finder wird beim Tab-Wechsel geladen
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|