Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-04-24 06:40:00 -07:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add spinning globe background to welcome and login pages

Browse Source 
Add animated SVG globe with rotating meridians as a subtle background
element on the welcome overlay and login pages.

Also removes unused signal-cards-mockup.html.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-01-27 23:24:50 +00:00
parent f70deb32a2
commit eae1820fda
4 changed files with 121 additions and 1490 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
templates/index.html
View File

@@ -27,6 +27,31 @@
<body>
<!-- Welcome Page -->
<div class="welcome-overlay" id="welcomePage">
<!-- Spinning Globe Background -->
<div class="globe-background">
<svg class="globe-svg" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<!-- Outer circle -->
<circle cx="200" cy="200" r="180" fill="none" stroke="currentColor" stroke-width="0.5"/>
<!-- Equator -->
<ellipse cx="200" cy="200" rx="180" ry="40" fill="none" stroke="currentColor" stroke-width="0.5"/>
<!-- Latitude lines -->
<ellipse cx="200" cy="140" rx="145" ry="30" fill="none" stroke="currentColor" stroke-width="0.3"/>
<ellipse cx="200" cy="260" rx="145" ry="30" fill="none" stroke="currentColor" stroke-width="0.3"/>
<ellipse cx="200" cy="90" rx="85" ry="15" fill="none" stroke="currentColor" stroke-width="0.3"/>
<ellipse cx="200" cy="310" rx="85" ry="15" fill="none" stroke="currentColor" stroke-width="0.3"/>
<!-- Prime meridian -->
<ellipse cx="200" cy="200" rx="40" ry="180" fill="none" stroke="currentColor" stroke-width="0.5" class="meridian meridian-1"/>
<!-- Additional meridians -->
<ellipse cx="200" cy="200" rx="100" ry="180" fill="none" stroke="currentColor" stroke-width="0.3" class="meridian meridian-2"/>
<ellipse cx="200" cy="200" rx="150" ry="180" fill="none" stroke="currentColor" stroke-width="0.3" class="meridian meridian-3"/>
<!-- Rotating meridian group -->
<g class="rotating-meridians">
<ellipse cx="200" cy="200" rx="70" ry="180" fill="none" stroke="currentColor" stroke-width="0.3"/>
<ellipse cx="200" cy="200" rx="130" ry="180" fill="none" stroke="currentColor" stroke-width="0.3"/>
<ellipse cx="200" cy="200" rx="170" ry="180" fill="none" stroke="currentColor" stroke-width="0.2"/>
</g>
</svg>
</div>
<div class="welcome-container">
<!-- Header Section -->
<div class="welcome-header">