3a2240b8a2
- Füge personas.js und personas.yml hinzu für Persona-Management - Implementiere dynamische Bundesland/Ausbildung-Dropdowns in Persona-Texten - Korrigiere Pfad-Handling in finder.js für Bundeslaender-repo Symlink - Erweitere CSS für Persona-Auswahl und Dropdown-Styling - Füge Persona-Bilder und Mapping-Dateien für alle Bundesländer hinzu - Implementiere Button-basierte Empfehlungsanzeige - Korrigiere Platzhalter in Persona-Texten (entferne ungefüllte Platzhalter)
112 lines
4.9 KiB
HTML
112 lines
4.9 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>
|
|
<button id="persona-empfehlung-button" class="button">Unsere Empfehlung für <span id="persona-button-name">Birgit</span></button>
|
|
</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 class="recommendation">
|
|
<span class="distinction">Unsere Empfehlung ist</span><br>
|
|
<div id="persona-empfehlung" class="main-content">
|
|
<h2 id="persona-headline"></h2>
|
|
<p id="persona-text-content"></p>
|
|
<p id="persona-tags" class="tags"></p>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Finder Tab -->
|
|
<div class="tab tab2">
|
|
<form id="selectionForm">
|
|
<div id="dynamic-steps"></div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Ergebnisse außerhalb des Tab-Containers -->
|
|
<div id="result" style="display: none;">
|
|
<div class="main-section">
|
|
<h2 id="finder-headline">Empfehlung</h2>
|
|
<div id="finder-text-content" class="text-content">...</div>
|
|
<div id="finder-tags" class="tags"></div>
|
|
<div id="finder-marginal" class="marginal"></div>
|
|
</div>
|
|
<!-- Zusätzliche Abschnitte werden hier dynamisch eingefügt -->
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/dist/js-yaml.min.js"></script>
|
|
<script src="Steuerungsdateien/personas.js"></script>
|
|
<script src="Steuerungsdateien/finder.js"></script>
|
|
|
|
<script>
|
|
// Tabs anzeigen
|
|
function showTab(tabId) {
|
|
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
|
document.querySelector(`.${tabId}`).classList.add('active');
|
|
document.querySelectorAll('.button-tab').forEach(btn => btn.classList.remove('active'));
|
|
document.querySelector(`.button-tab[onclick*="${tabId}"]`).classList.add('active');
|
|
|
|
// Tab-spezifische Initialisierung
|
|
if (tabId === 'tab1') {
|
|
showPersonasTab();
|
|
} else if (tabId === 'tab2') {
|
|
loadFinderStructure();
|
|
showFinderTabWithPersona();
|
|
}
|
|
}
|
|
|
|
// Initialisiere die Anwendung
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Personas werden automatisch geladen durch personas.js
|
|
// Finder wird beim Tab-Wechsel geladen
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|