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
95 lines
3.0 KiB
HTML
95 lines
3.0 KiB
HTML
<!-- CSS- und JavaScript-Imports für Typo3 -->
|
|
<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>
|
|
|
|
<!-- Hauptinhalt der Anwendung -->
|
|
<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">
|
|
<div class="portrait-left">
|
|
<img id="persona-image" src="" alt="Portrait">
|
|
</div>
|
|
<div class="info-right">
|
|
<div class="persona-head">
|
|
<h2 id="persona-name"></h2>
|
|
<span id="persona-title" class="subline"></span>
|
|
</div>
|
|
<div class="text">
|
|
<p id="persona-text"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="persona-list" id="persona-list"></div>
|
|
</div>
|
|
<div class="recommendation">
|
|
<div class="main-content">
|
|
<h2 id="persona-headline"></h2>
|
|
<p id="persona-text-content"></p>
|
|
<p id="persona-tags" class="tags"></p>
|
|
</div>
|
|
<div class="sidebar">
|
|
<blockquote id="persona-marginal"></blockquote>
|
|
</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>
|
|
|
|
<!-- JavaScript-Imports für Typo3 -->
|
|
<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>
|
|
|
|
<!-- JavaScript-Funktionen -->
|
|
<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>
|