generated from coulomb/repo-seed
tegwick
bc756fa0cd
- Add interactive zoom functionality (25%-300% with Ctrl+scroll wheel) - Fix SVG width constraints by injecting calculated dimensions into templates - Implement template preview with theme-aware sample data - Enhance UI layout with file reordering (Project → Template → CSS → Data) - Add blue theme support for my-project alongside existing green theme - Fix my-project field mapping from empty 'Übergeordnet' to 'Status' - Improve SVG viewport handling with proper scrolling and container management - Add visual zoom controls with percentage display and smart visibility 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
51 lines
2.1 KiB
XML
51 lines
2.1 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);">
|
|
<defs>
|
|
<!-- Enhanced month indicator styling -->
|
|
<linearGradient id="monthHeaderGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#3b82f6;stop-opacity:0.15"/>
|
|
<stop offset="100%" style="stop-color:#60a5fa;stop-opacity:0.08"/>
|
|
</linearGradient>
|
|
|
|
<!-- Drop shadow for month labels -->
|
|
<filter id="textShadow" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feDropShadow dx="1" dy="1" stdDeviation="1.5" flood-color="#3b82f6" flood-opacity="0.4"/>
|
|
</filter>
|
|
|
|
<!-- Subtle background grid pattern -->
|
|
<pattern id="bgGrid" width="40" height="40" patternUnits="userSpaceOnUse">
|
|
<rect width="40" height="40" fill="transparent"/>
|
|
<circle cx="20" cy="20" r="1" fill="#60a5fa" opacity="0.1"/>
|
|
</pattern>
|
|
</defs>
|
|
|
|
<!-- Background with subtle pattern -->
|
|
<rect width="100%" height="100%" fill="url(#bgGrid)"/>
|
|
|
|
<!-- Enhanced month header background -->
|
|
<rect x="0" y="0" width="100%" height="130" fill="url(#monthHeaderGrad)" stroke="#3b82f6" stroke-width="1" opacity="0.6"/>
|
|
|
|
<!-- Title area with visual indicator -->
|
|
<rect x="10" y="10" width="300" height="60" fill="#ffffff" stroke="#3b82f6" stroke-width="2" rx="8" opacity="0.9"/>
|
|
<text x="20" y="35" fill="#3b82f6" font-size="16" font-weight="bold" filter="url(#textShadow)">
|
|
📅 My Project Timeline
|
|
</text>
|
|
<text x="20" y="55" fill="#60a5fa" font-size="11" font-weight="500">
|
|
Enhanced blue styling with prominent months ✨
|
|
</text>
|
|
|
|
<!-- Month indicators with enhanced styling -->
|
|
<g class="enhanced-months" transform="translate(0,0)">
|
|
<rect x="0" y="75" width="100%" height="55" fill="rgba(59, 130, 246, 0.05)" stroke="#60a5fa" stroke-width="1"/>
|
|
{{MONTHS}}
|
|
</g>
|
|
|
|
<!-- Lane content -->
|
|
<g class="enhanced-lanes">
|
|
{{LANES}}
|
|
</g>
|
|
|
|
<!-- Decorative border -->
|
|
<rect x="1" y="1" width="calc(100% - 2)" height="calc(100% - 2)"
|
|
fill="none" stroke="#3b82f6" stroke-width="2" rx="4" opacity="0.7"/>
|
|
</svg>
|