96 lines
3.0 KiB
HTML
96 lines
3.0 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>
|
|
</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">
|
|
<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>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/dist/js-yaml.min.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');
|
|
|
|
// Wenn Finder-Tab aktiviert wird, lade die Struktur
|
|
if (tabId === 'tab2') {
|
|
loadFinderStructure();
|
|
}
|
|
}
|
|
|
|
// Initialisiere die Anwendung
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Lade den Finder beim Start
|
|
loadFinderStructure();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|