Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TreeTrack Minimal Tree Markers Preview</title> | |
| <style> | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| margin: 0; | |
| padding: 40px; | |
| min-height: 100vh; | |
| } | |
| .container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| background: white; | |
| border-radius: 12px; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.1); | |
| padding: 40px; | |
| } | |
| h1 { | |
| text-align: center; | |
| color: #2d3748; | |
| margin-bottom: 30px; | |
| } | |
| .markers-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); | |
| gap: 30px; | |
| margin: 40px 0; | |
| } | |
| .marker-demo { | |
| text-align: center; | |
| padding: 20px; | |
| background: #f8fafc; | |
| border-radius: 8px; | |
| border: 2px solid #e2e8f0; | |
| transition: all 0.2s ease; | |
| } | |
| .marker-demo:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.1); | |
| } | |
| .marker-container { | |
| margin: 20px 0; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .minimal-tree-marker { | |
| transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| cursor: pointer; | |
| } | |
| .minimal-tree-marker:hover { | |
| transform: scale(1.15) translateY(-2px); | |
| filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)) brightness(1.1); | |
| } | |
| .marker-label { | |
| font-weight: 600; | |
| color: #4a5568; | |
| margin-bottom: 5px; | |
| } | |
| .marker-id { | |
| font-size: 12px; | |
| color: #718096; | |
| } | |
| .description { | |
| background: #edf2f7; | |
| padding: 20px; | |
| border-radius: 8px; | |
| margin-top: 30px; | |
| color: #4a5568; | |
| line-height: 1.6; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>TreeTrack Minimal Tree Markers</h1> | |
| <div class="markers-grid"> | |
| <!-- Forest Green --> | |
| <div class="marker-demo"> | |
| <div class="marker-label">Forest Green</div> | |
| <div class="marker-container"> | |
| <div class="minimal-tree-marker"> | |
| <svg width="28" height="32" viewBox="0 0 28 32" fill="none"> | |
| <rect x="12" y="24" width="4" height="8" fill="#7c6643" rx="0.5"/> | |
| <path d="M14 2 C18.5 2, 22 6, 22 11 C22 16, 18.5 20, 14 20 C9.5 20, 6 16, 6 11 C6 6, 9.5 2, 14 2 Z" fill="#059669" stroke="white" stroke-width="1.5"/> | |
| <path d="M14 4 C17 4, 19.5 7, 19.5 10.5 C19.5 14, 17 17, 14 17 C11 17, 8.5 14, 8.5 10.5 C8.5 7, 11 4, 14 4 Z" fill="#047857" opacity="0.6"/> | |
| <circle cx="12" cy="9" r="2" fill="white" opacity="0.3"/> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="marker-id">Group 1 (IDs: 1, 6, 11...)</div> | |
| </div> | |
| <!-- Ocean Blue --> | |
| <div class="marker-demo"> | |
| <div class="marker-label">Ocean Blue</div> | |
| <div class="marker-container"> | |
| <div class="minimal-tree-marker"> | |
| <svg width="28" height="32" viewBox="0 0 28 32" fill="none"> | |
| <rect x="12" y="24" width="4" height="8" fill="#78716c" rx="0.5"/> | |
| <path d="M14 2 C18.5 2, 22 6, 22 11 C22 16, 18.5 20, 14 20 C9.5 20, 6 16, 6 11 C6 6, 9.5 2, 14 2 Z" fill="#0ea5e9" stroke="white" stroke-width="1.5"/> | |
| <path d="M14 4 C17 4, 19.5 7, 19.5 10.5 C19.5 14, 17 17, 14 17 C11 17, 8.5 14, 8.5 10.5 C8.5 7, 11 4, 14 4 Z" fill="#0284c7" opacity="0.6"/> | |
| <circle cx="12" cy="9" r="2" fill="white" opacity="0.3"/> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="marker-id">Group 2 (IDs: 2, 7, 12...)</div> | |
| </div> | |
| <!-- Sunset Orange --> | |
| <div class="marker-demo"> | |
| <div class="marker-label">Sunset Orange</div> | |
| <div class="marker-container"> | |
| <div class="minimal-tree-marker"> | |
| <svg width="28" height="32" viewBox="0 0 28 32" fill="none"> | |
| <rect x="12" y="24" width="4" height="8" fill="#92400e" rx="0.5"/> | |
| <path d="M14 2 C18.5 2, 22 6, 22 11 C22 16, 18.5 20, 14 20 C9.5 20, 6 16, 6 11 C6 6, 9.5 2, 14 2 Z" fill="#f97316" stroke="white" stroke-width="1.5"/> | |
| <path d="M14 4 C17 4, 19.5 7, 19.5 10.5 C19.5 14, 17 17, 14 17 C11 17, 8.5 14, 8.5 10.5 C8.5 7, 11 4, 14 4 Z" fill="#ea580c" opacity="0.6"/> | |
| <circle cx="12" cy="9" r="2" fill="white" opacity="0.3"/> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="marker-id">Group 3 (IDs: 3, 8, 13...)</div> | |
| </div> | |
| <!-- Royal Purple --> | |
| <div class="marker-demo"> | |
| <div class="marker-label">Royal Purple</div> | |
| <div class="marker-container"> | |
| <div class="minimal-tree-marker"> | |
| <svg width="28" height="32" viewBox="0 0 28 32" fill="none"> | |
| <rect x="12" y="24" width="4" height="8" fill="#6b21a8" rx="0.5"/> | |
| <path d="M14 2 C18.5 2, 22 6, 22 11 C22 16, 18.5 20, 14 20 C9.5 20, 6 16, 6 11 C6 6, 9.5 2, 14 2 Z" fill="#a855f7" stroke="white" stroke-width="1.5"/> | |
| <path d="M14 4 C17 4, 19.5 7, 19.5 10.5 C19.5 14, 17 17, 14 17 C11 17, 8.5 14, 8.5 10.5 C8.5 7, 11 4, 14 4 Z" fill="#9333ea" opacity="0.6"/> | |
| <circle cx="12" cy="9" r="2" fill="white" opacity="0.3"/> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="marker-id">Group 4 (IDs: 4, 9, 14...)</div> | |
| </div> | |
| <!-- Crimson Red --> | |
| <div class="marker-demo"> | |
| <div class="marker-label">Crimson Red</div> | |
| <div class="marker-container"> | |
| <div class="minimal-tree-marker"> | |
| <svg width="28" height="32" viewBox="0 0 28 32" fill="none"> | |
| <rect x="12" y="24" width="4" height="8" fill="#991b1b" rx="0.5"/> | |
| <path d="M14 2 C18.5 2, 22 6, 22 11 C22 16, 18.5 20, 14 20 C9.5 20, 6 16, 6 11 C6 6, 9.5 2, 14 2 Z" fill="#ef4444" stroke="white" stroke-width="1.5"/> | |
| <path d="M14 4 C17 4, 19.5 7, 19.5 10.5 C19.5 14, 17 17, 14 17 C11 17, 8.5 14, 8.5 10.5 C8.5 7, 11 4, 14 4 Z" fill="#dc2626" opacity="0.6"/> | |
| <circle cx="12" cy="9" r="2" fill="white" opacity="0.3"/> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="marker-id">Group 5 (IDs: 5, 10, 15...)</div> | |
| </div> | |
| </div> | |
| <div class="description"> | |
| <strong>Minimal Tree Marker Features:</strong><br> | |
| • Clean, single-shape canopy with white outline for sharpness<br> | |
| • Subtle depth layer for dimensionality without clutter<br> | |
| • 28×32 pixel size - perfect visibility without overwhelming<br> | |
| • Smooth hover animation with scale and brightness effects<br> | |
| • Tree colors rotate based on ID numbers in 5 groups<br> | |
| • Hover over the markers above to see the animation effect! | |
| </div> | |
| </div> | |
| </body> | |
| </html> |