gitadmin/sunscope
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

V1.0 Final Release

Browse Source 
Fixed Stripe Issues
New Mobile Menu
Improved Lens Graphic
This commit is contained in:
fraxle
2026-05-16 11:42:20 +01:00
parent 4f16a5c784
commit 7eba879acf
6 changed files with 382 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/components.js
+34
View File
@@ -498,6 +498,29 @@ export function ScopeReticle({ value, cat, loading, elev = 0, dt = new Date(), g
<stop offset="0%" stop-color=${glowColor} stop-opacity="0.12" />
<stop offset="100%" stop-color=${glowColor} stop-opacity="0" />
</radialGradient>
<!-- 3D lens: inner rim shadow — dark around the edge, transparent centre -->
<radialGradient id="scope-rim-shadow" cx="50%" cy="50%" r="50%">
<stop offset="72%" stop-color="transparent" />
<stop offset="100%" stop-color="rgba(20,10,0,0.38)" />
</radialGradient>
<!-- 3D lens: specular highlight — bright crescent top-left -->
<radialGradient id="scope-specular" cx="36%" cy="28%" r="42%">
<stop offset="0%" stop-color="rgba(255,255,255,0.28)" />
<stop offset="55%" stop-color="rgba(255,255,255,0.06)" />
<stop offset="100%" stop-color="rgba(255,255,255,0)" />
</radialGradient>
<!-- 3D lens: subtle bottom-right counter-glow for depth -->
<radialGradient id="scope-depth" cx="72%" cy="76%" r="38%">
<stop offset="0%" stop-color="rgba(180,120,20,0.10)" />
<stop offset="100%" stop-color="rgba(180,120,20,0)" />
</radialGradient>
<!-- Specular glint: feathered radial gradient, top-left -->
<radialGradient id="scope-glint" gradientUnits="userSpaceOnUse"
cx="62" cy="52" r="24" fx="62" fy="50">
<stop offset="0%" stop-color="rgba(255,255,255,0.80)" />
<stop offset="30%" stop-color="rgba(255,255,255,0.30)" />
<stop offset="100%" stop-color="rgba(255,255,255,0)" />
</radialGradient>
<clipPath id="scope-lens-clip">
<circle cx=${cx} cy=${cy} r=${lensR} />
</clipPath>
@@ -574,6 +597,17 @@ export function ScopeReticle({ value, cat, loading, elev = 0, dt = new Date(), g
</>`}
<circle cx=${cx} cy=${cy} r="5.5" fill="#f5edd6" stroke="#c8922a" stroke-width="1.5" />
<circle cx=${cx} cy=${cy} r="2.5" fill="#c8922a" />
<!-- 3D lens overlays: rim shadow + specular highlight + depth, all on top -->
<circle cx=${cx} cy=${cy} r=${lensR} fill="url(#scope-rim-shadow)" pointer-events="none" />
<circle cx=${cx} cy=${cy} r=${lensR} fill="url(#scope-specular)" pointer-events="none" />
<circle cx=${cx} cy=${cy} r=${lensR} fill="url(#scope-depth)" pointer-events="none" />
<!-- Specular glint: smooth feathered glow top-left, like light on curved glass -->
<circle cx="62" cy="52" r="24" fill="url(#scope-glint)" pointer-events="none" />
<!-- Outer brass bezel ring with a subtle 3D bevel -->
<circle cx=${cx} cy=${cy} r="97" fill="none"
stroke="rgba(255,220,140,0.45)" stroke-width="1.5" pointer-events="none" />
<circle cx=${cx} cy=${cy} r="99" fill="none"
stroke="rgba(80,40,0,0.25)" stroke-width="1.5" pointer-events="none" />
${loading
? html`<text x=${cx} y=${cy + 5} text-anchor="middle"
fill=${readoutMutedColor} font-size="11" font-family="monospace">· · ·</text>`