Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-04-29 17:19:59 -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

1490
signal-cards-mockup.html
View File

File diff suppressed because it is too large Load Diff

71
static/css/index.css
View File

@@ -113,6 +113,77 @@ body {
pointer-events: none;
}
/* Spinning Globe Background */
.globe-background {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(80vh, 80vw);
height: min(80vh, 80vw);
pointer-events: none;
z-index: 0;
}
.globe-svg {
width: 100%;
height: 100%;
color: var(--accent-cyan);
opacity: 0.06;
animation: globeSpin 60s linear infinite;
}
[data-theme="light"] .globe-svg {
opacity: 0.08;
}
@keyframes globeSpin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.globe-svg .rotating-meridians {
transform-origin: center;
animation: meridianSpin 45s linear infinite reverse;
}
@keyframes meridianSpin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.globe-svg .meridian-1 {
transform-origin: center;
animation: meridianPulse 8s ease-in-out infinite;
}
.globe-svg .meridian-2 {
transform-origin: center;
animation: meridianPulse 8s ease-in-out infinite 2s;
}
.globe-svg .meridian-3 {
transform-origin: center;
animation: meridianPulse 8s ease-in-out infinite 4s;
}
@keyframes meridianPulse {
0%, 100% {
opacity: 0.6;
}
50% {
opacity: 1;
}
}
.welcome-container {
width: 90%;
max-width: 900px;

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">

25
templates/login.html
View File

@@ -10,6 +10,31 @@
</head>
<body>
<div class="landing-overlay">
<!-- 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="landing-scanline"></div>
<div class="landing-content">