Spaces:
Runtime error
Runtime error
File size: 8,254 Bytes
44730c0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 | <!DOCTYPE html>
<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> |