coulomb/timeline-svg
2
0
Fork 0
generated from coulomb/repo-seed
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init: first commit of chatgpt prebuild

Browse Source
This commit is contained in:
Bernd Worsch
2025-11-18 21:36:59 +01:00
parent e0d2689a9d
commit eeebdd72d5
12 changed files with 401 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
index.html Normal file
View File

@@ -0,0 +1,52 @@
<!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>