feat(ui): add fullscreen toggle button and include icon proposals

2026-10-20 14:20:23 +08:00
parent 2c9dc6d2ee
commit f446c0ddbd
11 changed files with 683 additions and 9 deletions
--- a/public/icon-proposals/option-c.svg
+++ b/public/icon-proposals/option-c.svg
@@ -0,0 +1,142 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <defs>
+    <!-- Background Gradient -->
+    <radialGradient id="bgC" cx="48%" cy="42%" r="70%">
+      <stop offset="0%" stop-color="#14241c" />
+      <stop offset="55%" stop-color="#0a130f" />
+      <stop offset="100%" stop-color="#09090b" />
+    </radialGradient>
+
+    <!-- Fern Trunk & Spiral Ribbon Gradient -->
+    <linearGradient id="fernGradC" x1="0%" y1="100%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#047857" />
+      <stop offset="30%" stop-color="#059669" />
+      <stop offset="65%" stop-color="#10b981" />
+      <stop offset="85%" stop-color="#34d399" />
+      <stop offset="100%" stop-color="#a7f3d0" />
+    </linearGradient>
+
+    <!-- Middle Crossbar Frond Gradient -->
+    <linearGradient id="midFrondGradC" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#059669" />
+      <stop offset="50%" stop-color="#10b981" />
+      <stop offset="85%" stop-color="#34d399" />
+      <stop offset="100%" stop-color="#6ee7b7" />
+    </linearGradient>
+
+    <!-- Bio Spore Radial Glow -->
+    <radialGradient id="sporeGradC" cx="35%" cy="35%" r="65%">
+      <stop offset="0%" stop-color="#ffffff" />
+      <stop offset="40%" stop-color="#a7f3d0" />
+      <stop offset="75%" stop-color="#34d399" />
+      <stop offset="100%" stop-color="#059669" />
+    </radialGradient>
+
+    <!-- Organic Bloom Filter -->
+    <filter id="fernGlowC" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="8" result="blur" />
+      <feComposite in="SourceGraphic" in2="blur" operator="over" />
+    </filter>
+
+    <filter id="sporeFlareC" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="4" result="blur" />
+      <feComposite in="SourceGraphic" in2="blur" operator="over" />
+    </filter>
+  </defs>
+
+  <!-- Deep Obsidian Canvas -->
+  <rect width="512" height="512" rx="128" fill="url(#bgC)" />
+
+  <!-- Fibonacci Golden Ratio Geometric Guide Watermark -->
+  <g stroke="#10b981" fill="none" opacity="0.14">
+    <circle cx="256" cy="256" r="195" stroke-width="1.2" stroke-dasharray="6 6" />
+    <path d="M 180 395 C 190 280, 240 130, 350 130 C 420 130, 420 220, 360 220 C 310 220, 310 170, 345 170" stroke-width="1.5" stroke-dasharray="3 5" />
+    <path d="M 120 395 A 270 270 0 0 1 390 125" stroke-width="0.8" />
+  </g>
+
+  <!-- Ambient Vitality Aura -->
+  <circle cx="280" cy="200" r="120" fill="#10b981" fill-opacity="0.06" filter="url(#fernGlowC)" />
+
+  <!-- GOLDEN SPIRAL FERN 'F' -->
+  <g filter="url(#fernGlowC)">
+    <!-- Main Trunk to Top Arm & Golden Spiral Crozier Coil -->
+    <path d="M 178 396
+             C 188 330, 196 260, 206 180
+             C 214 135, 248 112, 305 112
+             C 342 112, 380 120, 400 145
+             C 416 168, 412 198, 386 216
+             C 358 232, 324 220, 318 190
+             C 314 165, 336 148, 358 152
+             C 374 156, 380 172, 372 184
+             C 366 190, 356 188, 354 180
+             C 352 174, 358 170, 362 172
+             C 366 174, 364 180, 360 180
+             C 356 180, 344 172, 346 162
+             C 348 152, 362 144, 376 150
+             C 394 158, 396 184, 380 200
+             C 360 216, 332 210, 328 185
+             C 324 155, 350 134, 385 136
+             C 358 126, 318 126, 280 136
+             C 245 146, 230 175, 226 215
+             C 220 270, 214 335, 212 396
+             Z"
+          fill="url(#fernGradC)" />
+
+    <!-- Middle Frond Crossbar (Unfurling Young Pinna) -->
+    <path d="M 214 250
+             C 246 240, 285 240, 328 250
+             C 348 255, 356 266, 348 276
+             C 338 286, 318 284, 298 276
+             C 264 266, 235 272, 212 284
+             Z"
+          fill="url(#midFrondGradC)" />
+
+    <!-- Organic micro-buds along the spine -->
+    <path d="M 194 320 C 182 315, 178 305, 186 298 C 192 305, 196 312, 194 320 Z" fill="#10b981" />
+    <path d="M 198 260 C 186 255, 182 245, 190 238 C 196 245, 200 252, 198 260 Z" fill="#34d399" />
+    <path d="M 206 200 C 196 195, 194 185, 202 178 C 206 185, 210 192, 206 200 Z" fill="#6ee7b7" />
+  </g>
+
+  <!-- Luminous Central Golden Spiral Filament -->
+  <path d="M 195 390
+           C 202 315, 212 225, 226 170
+           C 238 128, 275 118, 318 120
+           C 362 122, 396 138, 396 170
+           C 396 202, 365 214, 338 198
+           C 324 188, 330 166, 348 162
+           C 362 158, 370 172, 362 180"
+        fill="none"
+        stroke="#ecfdf5"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        filter="url(#sporeFlareC)" />
+
+  <!-- Mid Frond Center Vein -->
+  <path d="M 218 256 C 255 248, 295 248, 342 260"
+        fill="none"
+        stroke="#ecfdf5"
+        stroke-width="2"
+        stroke-linecap="round"
+        opacity="0.9" />
+
+  <!-- Golden Spiral Luminescent Spore Nodes -->
+  <g transform="translate(362, 174)" filter="url(#sporeFlareC)">
+    <circle cx="0" cy="0" r="10" fill="#34d399" fill-opacity="0.3" />
+    <circle cx="0" cy="0" r="5" fill="url(#sporeGradC)" />
+    <circle cx="-1.2" cy="-1.2" r="1.8" fill="#ffffff" />
+  </g>
+
+  <g transform="translate(398, 148)" filter="url(#sporeFlareC)">
+    <circle cx="0" cy="0" r="11" fill="#34d399" fill-opacity="0.3" />
+    <circle cx="0" cy="0" r="5.5" fill="url(#sporeGradC)" />
+    <circle cx="-1.5" cy="-1.5" r="2" fill="#ffffff" />
+  </g>
+
+  <g transform="translate(346, 262)" filter="url(#sporeFlareC)">
+    <circle cx="0" cy="0" r="9" fill="#10b981" fill-opacity="0.3" />
+    <circle cx="0" cy="0" r="4.5" fill="url(#sporeGradC)" />
+    <circle cx="-1" cy="-1" r="1.5" fill="#ffffff" />
+  </g>
+
+  <circle cx="206" cy="285" r="3.5" fill="url(#sporeGradC)" />
+</svg>