Refine golf ball logo and add static route

- Adjust dimple size and spacing for balanced appearance
- Enlarge card suit symbols (font-size 32) in single row
- Fine-tune symbol positioning and spacing
- Increase margin between logo and golfer emoji
- Add /golfball-logo.svg static file route

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Aaron D. Lee 2026-01-27 12:51:10 -05:00
parent d2e78da7d2
commit ba85a11d1a
3 changed files with 43 additions and 73 deletions

View File

@ -1,11 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -4 100 104" width="100" height="100">
<defs> <defs>
<!-- Gradient for 3D ball effect --> <!-- Gradient for 3D ball effect - transparent base -->
<radialGradient id="ballGradient" cx="30%" cy="25%" r="65%" fx="25%" fy="20%"> <radialGradient id="ballGradient" cx="30%" cy="25%" r="65%" fx="25%" fy="20%">
<stop offset="0%" stop-color="#ffffff"/> <stop offset="0%" stop-color="#ffffff" stop-opacity="0.95"/>
<stop offset="50%" stop-color="#f5f5f5"/> <stop offset="50%" stop-color="#f5f5f5" stop-opacity="0.9"/>
<stop offset="80%" stop-color="#e0e0e0"/> <stop offset="80%" stop-color="#e0e0e0" stop-opacity="0.85"/>
<stop offset="100%" stop-color="#c8c8c8"/> <stop offset="100%" stop-color="#c8c8c8" stop-opacity="0.8"/>
</radialGradient> </radialGradient>
<!-- Dimple shading gradient --> <!-- Dimple shading gradient -->
@ -16,86 +16,52 @@
<!-- Clip for dimples to stay within ball --> <!-- Clip for dimples to stay within ball -->
<clipPath id="ballClip"> <clipPath id="ballClip">
<circle cx="50" cy="50" r="45"/> <circle cx="50" cy="44" r="45"/>
</clipPath> </clipPath>
</defs> </defs>
<!-- Main ball base --> <!-- Main ball base -->
<circle cx="50" cy="50" r="46" fill="url(#ballGradient)"/> <circle cx="50" cy="44" r="46" fill="url(#ballGradient)"/>
<!-- Dimples - arranged in organic pattern --> <!-- Dimples - balanced pattern with more spacing -->
<g clip-path="url(#ballClip)" fill="url(#dimpleGrad)" opacity="0.5"> <g clip-path="url(#ballClip)" fill="url(#dimpleGrad)" opacity="0.5">
<!-- Ring 1 - outer edge dimples --> <!-- Outer ring -->
<circle cx="50" cy="8" r="3.5"/> <circle cx="50" cy="2" r="3.5"/>
<circle cx="67" cy="12" r="3.5"/> <circle cx="74" cy="12" r="3.5"/>
<circle cx="81" cy="23" r="3.5"/> <circle cx="88" cy="38" r="3.5"/>
<circle cx="89" cy="40" r="3.5"/> <circle cx="85" cy="64" r="3.5"/>
<circle cx="90" cy="58" r="3.5"/> <circle cx="62" cy="84" r="3.5"/>
<circle cx="83" cy="75" r="3.5"/> <circle cx="38" cy="84" r="3.5"/>
<circle cx="70" cy="87" r="3.5"/> <circle cx="15" cy="64" r="3.5"/>
<circle cx="50" cy="92" r="3.5"/> <circle cx="12" cy="38" r="3.5"/>
<circle cx="30" cy="87" r="3.5"/> <circle cx="26" cy="12" r="3.5"/>
<circle cx="17" cy="75" r="3.5"/>
<circle cx="10" cy="58" r="3.5"/>
<circle cx="11" cy="40" r="3.5"/>
<circle cx="19" cy="23" r="3.5"/>
<circle cx="33" cy="12" r="3.5"/>
<!-- Ring 2 --> <!-- Middle ring - slightly offset -->
<circle cx="50" cy="18" r="3.2"/> <circle cx="62" cy="16" r="3.2"/>
<circle cx="64" cy="22" r="3.2"/> <circle cx="79" cy="50" r="3.2"/>
<circle cx="75" cy="32" r="3.2"/> <circle cx="68" cy="72" r="3.2"/>
<circle cx="80" cy="47" r="3.2"/> <circle cx="50" cy="80" r="3.2"/>
<circle cx="78" cy="63" r="3.2"/> <circle cx="32" cy="72" r="3.2"/>
<circle cx="70" cy="76" r="3.2"/> <circle cx="21" cy="50" r="3.2"/>
<circle cx="57" cy="83" r="3.2"/> <circle cx="38" cy="16" r="3.2"/>
<circle cx="43" cy="83" r="3.2"/>
<circle cx="30" cy="76" r="3.2"/>
<circle cx="22" cy="63" r="3.2"/>
<circle cx="20" cy="47" r="3.2"/>
<circle cx="25" cy="32" r="3.2"/>
<circle cx="36" cy="22" r="3.2"/>
<!-- Ring 3 - mid area (avoiding center for suits) --> <!-- Inner - avoiding center -->
<circle cx="50" cy="27" r="2.8"/> <circle cx="50" cy="10" r="2.8"/>
<circle cx="62" cy="32" r="2.8"/> <circle cx="70" cy="32" r="2.8"/>
<circle cx="70" cy="42" r="2.8"/> <circle cx="30" cy="32" r="2.8"/>
<circle cx="72" cy="58" r="2.8"/> <circle cx="72" cy="58" r="2.8"/>
<circle cx="66" cy="70" r="2.8"/>
<circle cx="34" cy="70" r="2.8"/>
<circle cx="28" cy="58" r="2.8"/> <circle cx="28" cy="58" r="2.8"/>
<circle cx="30" cy="42" r="2.8"/>
<circle cx="38" cy="32" r="2.8"/>
<!-- Scattered small dimples in gaps -->
<circle cx="57" cy="15" r="2.5"/>
<circle cx="43" cy="15" r="2.5"/>
<circle cx="84" cy="50" r="2.5"/>
<circle cx="16" cy="50" r="2.5"/>
<circle cx="76" cy="68" r="2.5"/>
<circle cx="24" cy="68" r="2.5"/>
<circle cx="76" cy="32" r="2.5"/>
<circle cx="24" cy="32" r="2.5"/>
<circle cx="40" cy="80" r="2.5"/>
<circle cx="60" cy="80" r="2.5"/>
</g> </g>
<!-- Subtle inner shadow for depth --> <!-- Subtle inner shadow for depth -->
<circle cx="50" cy="50" r="45" fill="none" stroke="#a0a0a0" stroke-width="1" opacity="0.3"/> <circle cx="50" cy="44" r="45" fill="none" stroke="#a0a0a0" stroke-width="1" opacity="0.3"/>
<!-- Outer edge highlight --> <!-- Outer edge highlight -->
<circle cx="50" cy="50" r="46" fill="none" stroke="#ffffff" stroke-width="0.5" opacity="0.5"/> <circle cx="50" cy="44" r="46" fill="none" stroke="#ffffff" stroke-width="0.5" opacity="0.5"/>
<!-- Card suits - 2x2 grid in center --> <!-- Card suits - single row, larger -->
<!-- Club (black) - top left --> <text x="22" y="51" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="#1a1a1a" text-anchor="middle">&#9827;</text>
<text x="38" y="50" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#1a1a1a" text-anchor="middle">&#9827;</text> <text x="41" y="51" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="#cc0000" text-anchor="middle">&#9830;</text>
<text x="59" y="51" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="#1a1a1a" text-anchor="middle">&#9824;</text>
<!-- Diamond (red) - top right --> <text x="77" y="51" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="#cc0000" text-anchor="middle">&#9829;</text>
<text x="62" y="50" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#cc0000" text-anchor="middle">&#9830;</text>
<!-- Spade (black) - bottom left -->
<text x="38" y="68" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#1a1a1a" text-anchor="middle">&#9824;</text>
<!-- Heart (red) - bottom right -->
<text x="62" y="68" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#cc0000" text-anchor="middle">&#9829;</text>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

@ -82,7 +82,7 @@ body {
width: 1.1em; width: 1.1em;
height: 1.1em; height: 1.1em;
vertical-align: middle; vertical-align: middle;
margin-right: 0.1em; margin-right: 18px;
filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.25)); filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.25));
} }

View File

@ -964,6 +964,10 @@ if os.path.exists(client_path):
async def serve_leaderboard_js(): async def serve_leaderboard_js():
return FileResponse(os.path.join(client_path, "leaderboard.js"), media_type="application/javascript") return FileResponse(os.path.join(client_path, "leaderboard.js"), media_type="application/javascript")
@app.get("/golfball-logo.svg")
async def serve_golfball_logo():
return FileResponse(os.path.join(client_path, "golfball-logo.svg"), media_type="image/svg+xml")
# Admin dashboard # Admin dashboard
@app.get("/admin") @app.get("/admin")
async def serve_admin(): async def serve_admin():