generated from coulomb/repo-seed
53 lines
1.9 KiB
HTML
53 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Timeline Generator</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>
|
|
<link id="dynamicCss" rel="stylesheet" href="">
|
|
<script defer src="engine.js"></script>
|
|
<script defer src="generator.js"></script>
|
|
</head>
|
|
<body class="internal-mode" style="font-family: Inter, Arial, sans-serif; background:#f5f7fa; margin:20px;">
|
|
|
|
<h1 id="projectName" style="color:#0A4D8C; margin-bottom:8px;">Timeline Generator</h1>
|
|
<p id="projectSubtitle" style="color:#5C6B7A; margin-top:0; margin-bottom:16px;">
|
|
Wähle ein Projekt oder lade CSV/CSS/SVG-Dateien, um eine Timeline zu erzeugen.
|
|
</p>
|
|
|
|
<div class="controls" style="margin-bottom:16px; display:flex; flex-wrap:wrap; gap:12px; align-items:center;">
|
|
<label>Projekt laden:
|
|
<input type="file" id="projectInput" accept=".json" />
|
|
</label>
|
|
<label>CSV laden:
|
|
<input type="file" id="csvInput" accept=".csv" />
|
|
</label>
|
|
<label>CSS laden:
|
|
<input type="file" id="cssInput" accept=".css" />
|
|
</label>
|
|
<label>SVG Template laden:
|
|
<input type="file" id="svgInput" accept=".svg" />
|
|
</label>
|
|
|
|
<button id="toggleView" style="padding:8px 14px; background:#0A4D8C; color:white; border:none; border-radius:6px; cursor:pointer;">
|
|
Switch View (Internal / External)
|
|
</button>
|
|
<button id="downloadSvg" disabled
|
|
style="padding:8px 14px; background:#0A4D8C; color:white; border:none; border-radius:6px; cursor:pointer; opacity:0.6;">
|
|
Download SVG
|
|
</button>
|
|
</div>
|
|
|
|
<div id="viewer" style="border:1px solid #ccd3db; background:white; padding:12px; border-radius:8px; overflow-x:auto; min-height:200px;">
|
|
<em style="color:#999;">Noch keine Timeline generiert.</em>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
window.timelineEngine.autoLoadDefaultProject();
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|