fix: redesign earth hud interactions and legend behavior
This commit is contained in:
linkong
@@ -7,6 +7,35 @@ This project follows the repository versioning rule:
|
|||||||
- `feature` -> `+0.1.0`
|
- `feature` -> `+0.1.0`
|
||||||
- `bugfix` -> `+0.0.1`
|
- `bugfix` -> `+0.0.1`
|
||||||
|
|
||||||
|
## 0.21.2
|
||||||
|
|
||||||
|
Released: 2026-03-26
|
||||||
|
|
||||||
|
### Highlights
|
||||||
|
|
||||||
|
- Reworked the Earth page HUD into a bottom-centered floating toolbar with grouped popovers and richer interaction feedback.
|
||||||
|
- Unified toolbar and corner cards under a liquid-glass visual language and refined status toasts, object info cards, and legend behavior.
|
||||||
|
- Made the legend state reflect the currently selected Earth object instead of a fixed static list.
|
||||||
|
|
||||||
|
### Added
|
||||||
|
|
||||||
|
- Added a reusable Earth legend module in [legend.js](/home/ray/dev/linkong/planet/frontend/public/earth/js/legend.js).
|
||||||
|
- Added Material Symbols-based Earth toolbar icons and dedicated fullscreen-collapse icon support.
|
||||||
|
- Added click-to-copy support for info-card field labels.
|
||||||
|
|
||||||
|
### Improved
|
||||||
|
|
||||||
|
- Improved Earth toolbar layout with centered floating controls, popover-based display toggles, and zoom controls.
|
||||||
|
- Improved Earth HUD visuals with liquid-glass styling for buttons, info cards, panels, and animated status messages.
|
||||||
|
- Improved info-card spacing, scrollbar styling, and object detail readability.
|
||||||
|
- Improved legend rendering so cable and satellite object selection can drive the displayed legend content.
|
||||||
|
|
||||||
|
### Fixed
|
||||||
|
|
||||||
|
- Fixed tooltip coverage and splash copy mismatches in the Earth page controls.
|
||||||
|
- Fixed several toolbar icon clarity, centering, and state-toggle issues.
|
||||||
|
- Fixed status-message behavior so repeated notifications replay the slide-in animation.
|
||||||
|
|
||||||
## 0.20.0
|
## 0.20.0
|
||||||
|
|
||||||
Released: 2026-03-26
|
Released: 2026-03-26
|
||||||
|
|||||||
@@ -64,6 +64,7 @@
|
|||||||
| `0.20.0` | feature | `dev` | `ce5feba3` | stabilize Earth module and fix satellite TLE handling |
|
| `0.20.0` | feature | `dev` | `ce5feba3` | stabilize Earth module and fix satellite TLE handling |
|
||||||
| `0.21.0` | feature | `dev` | `pending` | add Earth inertial drag, sync hover/trail state, and support unlimited satellite loading |
|
| `0.21.0` | feature | `dev` | `pending` | add Earth inertial drag, sync hover/trail state, and support unlimited satellite loading |
|
||||||
| `0.21.1` | bugfix | `dev` | `pending` | polish Earth toolbar controls, icons, and loading copy |
|
| `0.21.1` | bugfix | `dev` | `pending` | polish Earth toolbar controls, icons, and loading copy |
|
||||||
|
| `0.21.2` | bugfix | `dev` | `pending` | redesign Earth HUD with liquid-glass controls, dynamic legend switching, and info-card interaction polish |
|
||||||
|
|
||||||
## Maintenance Commits Not Counted as Version Bumps
|
## Maintenance Commits Not Counted as Version Bumps
|
||||||
|
|
||||||
|
|||||||
@@ -13,6 +13,23 @@ body {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--hud-border: rgba(210, 237, 255, 0.32);
|
||||||
|
--hud-border-hover: rgba(232, 246, 255, 0.48);
|
||||||
|
--hud-border-active: rgba(245, 251, 255, 0.62);
|
||||||
|
--glass-fill-top: rgba(255, 255, 255, 0.18);
|
||||||
|
--glass-fill-bottom: rgba(115, 180, 255, 0.08);
|
||||||
|
--glass-sheen: rgba(255, 255, 255, 0.34);
|
||||||
|
--glass-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
|
||||||
|
--glass-glow: 0 0 26px rgba(120, 200, 255, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
@property --float-offset {
|
||||||
|
syntax: '<length>';
|
||||||
|
inherits: false;
|
||||||
|
initial-value: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
#container {
|
#container {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
@@ -23,136 +40,103 @@ body {
|
|||||||
cursor: grabbing;
|
cursor: grabbing;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Right Toolbar Group */
|
/* Bottom Dock */
|
||||||
#right-toolbar-group {
|
#right-toolbar-group {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 20px;
|
bottom: 18px;
|
||||||
right: 290px;
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: row;
|
||||||
align-items: flex-end;
|
align-items: center;
|
||||||
gap: 10px;
|
justify-content: center;
|
||||||
z-index: 200;
|
z-index: 200;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Zoom Toolbar - Right side, vertical */
|
#right-toolbar-group,
|
||||||
#zoom-toolbar {
|
#info-panel,
|
||||||
position: relative;
|
#coordinates-display,
|
||||||
bottom: auto;
|
#legend,
|
||||||
right: auto;
|
#earth-stats {
|
||||||
display: flex;
|
transition:
|
||||||
flex-direction: column;
|
top 0.45s ease,
|
||||||
align-items: center;
|
right 0.45s ease,
|
||||||
gap: 6px;
|
bottom 0.45s ease,
|
||||||
background: rgba(10, 10, 30, 0.9);
|
left 0.45s ease,
|
||||||
padding: 8px 4px;
|
transform 0.45s ease,
|
||||||
border-radius: 24px;
|
box-shadow 0.45s ease;
|
||||||
border: 1px solid rgba(77, 184, 255, 0.3);
|
|
||||||
box-shadow: 0 0 20px rgba(77, 184, 255, 0.2);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#zoom-toolbar #zoom-slider {
|
#info-panel,
|
||||||
width: 4px;
|
#coordinates-display,
|
||||||
height: 50px;
|
#legend,
|
||||||
margin: 4px 0;
|
#earth-stats,
|
||||||
writing-mode: vertical-lr;
|
#satellite-info {
|
||||||
direction: rtl;
|
|
||||||
-webkit-appearance: slider-vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
#zoom-toolbar .zoom-percent {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #4db8ff;
|
|
||||||
min-width: 30px;
|
|
||||||
display: inline-block;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 2px 4px;
|
|
||||||
border-radius: 3px;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
#zoom-toolbar .zoom-percent:hover {
|
|
||||||
background: rgba(77, 184, 255, 0.2);
|
|
||||||
box-shadow: 0 0 10px rgba(77, 184, 255, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
#zoom-toolbar .zoom-btn {
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
min-width: 28px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: rgba(77, 184, 255, 0.2);
|
|
||||||
color: #4db8ff;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#zoom-toolbar .zoom-btn:hover {
|
|
||||||
background: rgba(77, 184, 255, 0.4);
|
|
||||||
transform: scale(1.1);
|
|
||||||
box-shadow: 0 0 10px rgba(77, 184, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
#zoom-toolbar #reset-view svg {
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
stroke: currentColor;
|
|
||||||
stroke-width: 1.8;
|
|
||||||
fill: none;
|
|
||||||
stroke-linecap: round;
|
|
||||||
stroke-linejoin: round;
|
|
||||||
}
|
|
||||||
|
|
||||||
#zoom-toolbar .zoom-percent {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#zoom-toolbar .tooltip {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: calc(100% + 10px);
|
overflow: hidden;
|
||||||
top: 50%;
|
isolation: isolate;
|
||||||
transform: translateY(-50%);
|
background:
|
||||||
background: rgba(10, 10, 30, 0.95);
|
radial-gradient(circle at 24% 12%, rgba(255, 255, 255, 0.12), transparent 28%),
|
||||||
color: #fff;
|
radial-gradient(circle at 78% 115%, rgba(255, 255, 255, 0.06), transparent 32%),
|
||||||
padding: 6px 12px;
|
linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(110, 176, 255, 0.06)),
|
||||||
border-radius: 6px;
|
rgba(7, 18, 36, 0.28);
|
||||||
font-size: 12px;
|
border: 1px solid rgba(225, 242, 255, 0.2);
|
||||||
white-space: nowrap;
|
box-shadow:
|
||||||
opacity: 0;
|
inset 0 1px 0 rgba(255, 255, 255, 0.14),
|
||||||
visibility: hidden;
|
inset 0 -1px 0 rgba(255, 255, 255, 0.04),
|
||||||
transition: all 0.2s ease;
|
0 18px 40px rgba(0, 0, 0, 0.24),
|
||||||
border: 1px solid rgba(77, 184, 255, 0.4);
|
0 0 32px rgba(120, 200, 255, 0.12);
|
||||||
pointer-events: none;
|
backdrop-filter: blur(20px) saturate(145%);
|
||||||
z-index: 100;
|
-webkit-backdrop-filter: blur(20px) saturate(145%);
|
||||||
}
|
}
|
||||||
|
|
||||||
#zoom-toolbar .zoom-btn:hover .tooltip,
|
#info-panel::before,
|
||||||
#zoom-toolbar .zoom-percent:hover .tooltip {
|
#coordinates-display::before,
|
||||||
opacity: 1;
|
#legend::before,
|
||||||
visibility: visible;
|
#earth-stats::before,
|
||||||
}
|
#satellite-info::before {
|
||||||
|
|
||||||
#zoom-toolbar .tooltip::after {
|
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 100%;
|
inset: 1px 1px 24% 1px;
|
||||||
top: 50%;
|
border-radius: inherit;
|
||||||
transform: translateY(-50%);
|
background:
|
||||||
border: 6px solid transparent;
|
linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05) 26%, transparent 70%);
|
||||||
border-left-color: rgba(77, 184, 255, 0.4);
|
opacity: 0.46;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info-panel::after,
|
||||||
|
#coordinates-display::after,
|
||||||
|
#legend::after,
|
||||||
|
#earth-stats::after,
|
||||||
|
#satellite-info::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: -1px;
|
||||||
|
padding: 1.4px;
|
||||||
|
border-radius: inherit;
|
||||||
|
background:
|
||||||
|
linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(170, 223, 255, 0.2) 34%, rgba(88, 169, 255, 0.14) 68%, rgba(255, 255, 255, 0.24));
|
||||||
|
opacity: 0.78;
|
||||||
|
pointer-events: none;
|
||||||
|
filter: url(#liquid-glass-distortion) blur(0.35px);
|
||||||
|
-webkit-mask:
|
||||||
|
linear-gradient(#000 0 0) content-box,
|
||||||
|
linear-gradient(#000 0 0);
|
||||||
|
-webkit-mask-composite: xor;
|
||||||
|
mask:
|
||||||
|
linear-gradient(#000 0 0) content-box,
|
||||||
|
linear-gradient(#000 0 0);
|
||||||
|
mask-composite: exclude;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info-panel > *,
|
||||||
|
#coordinates-display > *,
|
||||||
|
#legend > *,
|
||||||
|
#earth-stats > *,
|
||||||
|
#satellite-info > * {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#loading {
|
#loading {
|
||||||
@@ -236,16 +220,28 @@ input[type="range"]::-webkit-slider-thumb {
|
|||||||
.status-message {
|
.status-message {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
right: 260px;
|
left: 50%;
|
||||||
|
transform: translate(-50%, -18px);
|
||||||
background-color: rgba(10, 10, 30, 0.85);
|
background-color: rgba(10, 10, 30, 0.85);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
z-index: 10;
|
z-index: 210;
|
||||||
box-shadow: 0 0 20px rgba(0, 150, 255, 0.3);
|
box-shadow: 0 0 20px rgba(0, 150, 255, 0.3);
|
||||||
border: 1px solid rgba(0, 150, 255, 0.2);
|
border: 1px solid rgba(0, 150, 255, 0.2);
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
display: none;
|
display: none;
|
||||||
backdrop-filter: blur(5px);
|
backdrop-filter: blur(5px);
|
||||||
|
text-align: center;
|
||||||
|
min-width: 180px;
|
||||||
|
opacity: 0;
|
||||||
|
transition:
|
||||||
|
transform 0.28s ease,
|
||||||
|
opacity 0.28s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-message.visible {
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-message.success {
|
.status-message.success {
|
||||||
@@ -278,83 +274,172 @@ input[type="range"]::-webkit-slider-thumb {
|
|||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Control Toolbar - Stellarium/Star Walk style */
|
/* Floating toolbar dock */
|
||||||
#control-toolbar {
|
#control-toolbar {
|
||||||
position: relative;
|
position: relative;
|
||||||
bottom: auto;
|
|
||||||
right: auto;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: rgba(10, 10, 30, 0.9);
|
justify-content: center;
|
||||||
border-radius: 24px;
|
gap: 0;
|
||||||
padding: 8px;
|
|
||||||
border: 1px solid rgba(77, 184, 255, 0.3);
|
|
||||||
box-shadow: 0 0 20px rgba(77, 184, 255, 0.2);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
#control-toolbar.collapsed {
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#control-toolbar.collapsed .toolbar-items {
|
|
||||||
width: 0;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#toolbar-toggle {
|
|
||||||
min-width: 28px;
|
|
||||||
line-height: 1;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
flex-shrink: 0;
|
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
box-shadow: none;
|
||||||
|
padding: 0;
|
||||||
.toggle-arrow {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: #4db8ff;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-arrow svg {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
stroke: currentColor;
|
|
||||||
stroke-width: 2.2;
|
|
||||||
fill: none;
|
|
||||||
stroke-linecap: round;
|
|
||||||
stroke-linejoin: round;
|
|
||||||
}
|
|
||||||
|
|
||||||
#control-toolbar.collapsed .toggle-arrow {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
#control-toolbar:not(.collapsed) .toggle-arrow {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
#control-toolbar.collapsed #toolbar-toggle {
|
|
||||||
background: transparent;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-items {
|
.toolbar-items {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 6px;
|
gap: 10px;
|
||||||
width: auto;
|
align-items: center;
|
||||||
padding: 0 4px 0 2px;
|
flex-wrap: nowrap;
|
||||||
overflow: visible;
|
}
|
||||||
opacity: 1;
|
|
||||||
transition: all 0.3s ease;
|
.floating-popover-group {
|
||||||
border-right: 1px solid rgba(77, 184, 255, 0.3);
|
position: relative;
|
||||||
margin-right: 4px;
|
}
|
||||||
flex-shrink: 0;
|
|
||||||
|
.floating-popover-group::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 100%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 56px;
|
||||||
|
height: 16px;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-popover-group > .stack-toolbar {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: auto;
|
||||||
|
right: auto;
|
||||||
|
bottom: calc(100% + 12px);
|
||||||
|
transform: translate(-50%, 10px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
transition:
|
||||||
|
opacity 0.22s ease,
|
||||||
|
transform 0.22s ease,
|
||||||
|
visibility 0.22s ease;
|
||||||
|
z-index: 220;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-btn.floating-btn {
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
min-width: 42px;
|
||||||
|
min-height: 42px;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.liquid-glass-surface {
|
||||||
|
--elastic-x: 0px;
|
||||||
|
--elastic-y: 0px;
|
||||||
|
--tilt-x: 0deg;
|
||||||
|
--tilt-y: 0deg;
|
||||||
|
--btn-scale: 1;
|
||||||
|
--press-offset: 0px;
|
||||||
|
--float-offset: 0px;
|
||||||
|
--glow-opacity: 0.24;
|
||||||
|
--glow-x: 50%;
|
||||||
|
--glow-y: 22%;
|
||||||
|
position: relative;
|
||||||
|
isolation: isolate;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
overflow: hidden;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.16), transparent 34%),
|
||||||
|
radial-gradient(circle at 50% 118%, rgba(255, 255, 255, 0.08), transparent 30%),
|
||||||
|
linear-gradient(180deg, var(--glass-fill-top), var(--glass-fill-bottom)),
|
||||||
|
rgba(8, 20, 38, 0.22);
|
||||||
|
border: 1px solid var(--hud-border);
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.14),
|
||||||
|
inset 0 -1px 0 rgba(255, 255, 255, 0.05),
|
||||||
|
var(--glass-shadow),
|
||||||
|
var(--glass-glow);
|
||||||
|
backdrop-filter: blur(18px) saturate(145%);
|
||||||
|
-webkit-backdrop-filter: blur(18px) saturate(145%);
|
||||||
|
transform:
|
||||||
|
translate3d(var(--elastic-x), calc(var(--float-offset) + var(--press-offset) + var(--elastic-y)), 0)
|
||||||
|
scale(var(--btn-scale));
|
||||||
|
transition:
|
||||||
|
transform 0.22s ease,
|
||||||
|
box-shadow 0.22s ease,
|
||||||
|
background 0.22s ease,
|
||||||
|
opacity 0.18s ease,
|
||||||
|
border-color 0.22s ease;
|
||||||
|
animation: floatDock 3.8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.liquid-glass-surface::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 1px 1px 18px 1px;
|
||||||
|
border-radius: inherit;
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05) 28%, transparent 68%);
|
||||||
|
opacity: 0.5;
|
||||||
|
pointer-events: none;
|
||||||
|
transform:
|
||||||
|
perspective(120px)
|
||||||
|
rotateX(calc(var(--tilt-x) * 0.7))
|
||||||
|
rotateY(calc(var(--tilt-y) * 0.7))
|
||||||
|
translate3d(calc(var(--elastic-x) * 0.22), calc(var(--elastic-y) * 0.22), 0);
|
||||||
|
transition: opacity 0.18s ease, transform 0.18s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.liquid-glass-surface::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: -1px;
|
||||||
|
padding: 1.35px;
|
||||||
|
border-radius: inherit;
|
||||||
|
background:
|
||||||
|
linear-gradient(135deg, rgba(255, 255, 255, 0.36), rgba(168, 222, 255, 0.22) 34%, rgba(96, 175, 255, 0.16) 66%, rgba(255, 255, 255, 0.28));
|
||||||
|
opacity: 0.82;
|
||||||
|
pointer-events: none;
|
||||||
|
filter: url(#liquid-glass-distortion) blur(0.35px);
|
||||||
|
transform:
|
||||||
|
perspective(120px)
|
||||||
|
rotateX(calc(var(--tilt-x) * 0.5))
|
||||||
|
rotateY(calc(var(--tilt-y) * 0.5))
|
||||||
|
translate3d(calc(var(--elastic-x) * 0.16), calc(var(--elastic-y) * 0.16), 0);
|
||||||
|
-webkit-mask:
|
||||||
|
linear-gradient(#000 0 0) content-box,
|
||||||
|
linear-gradient(#000 0 0);
|
||||||
|
-webkit-mask-composite: xor;
|
||||||
|
mask:
|
||||||
|
linear-gradient(#000 0 0) content-box,
|
||||||
|
linear-gradient(#000 0 0);
|
||||||
|
mask-composite: exclude;
|
||||||
|
transition: opacity 0.18s ease, transform 0.18s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-items > :nth-child(2n).floating-btn,
|
||||||
|
.toolbar-items > :nth-child(2n) .floating-btn {
|
||||||
|
animation-delay: 0.18s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-items > :nth-child(3n).floating-btn,
|
||||||
|
.toolbar-items > :nth-child(3n) .floating-btn {
|
||||||
|
animation-delay: 0.34s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes floatDock {
|
||||||
|
0%, 100% {
|
||||||
|
--float-offset: 0px;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
--float-offset: -4px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-btn {
|
.toolbar-btn {
|
||||||
@@ -362,44 +447,132 @@ input[type="range"]::-webkit-slider-thumb {
|
|||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 50%;
|
border-radius: 0;
|
||||||
background: rgba(77, 184, 255, 0.15);
|
background: transparent;
|
||||||
color: #4db8ff;
|
color: #4db8ff;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
transition: all 0.2s ease;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
overflow: visible;
|
||||||
|
appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-btn:hover {
|
.toolbar-btn:not(.liquid-glass-surface)::after {
|
||||||
background: rgba(77, 184, 255, 0.35);
|
content: none;
|
||||||
transform: scale(1.1);
|
|
||||||
box-shadow: 0 0 15px rgba(77, 184, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar-btn:active {
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar-btn.active {
|
|
||||||
background: rgba(77, 184, 255, 0.4);
|
|
||||||
box-shadow: 0 0 10px rgba(77, 184, 255, 0.4) inset;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-btn .icon {
|
.toolbar-btn .icon {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
transform: translateZ(0);
|
||||||
|
transition: transform 0.16s ease, opacity 0.16s ease;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.liquid-glass-surface:hover {
|
||||||
|
--btn-scale: 1.035;
|
||||||
|
--press-offset: -1px;
|
||||||
|
--glow-opacity: 0.32;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.18), transparent 34%),
|
||||||
|
radial-gradient(circle at 50% 118%, rgba(255, 255, 255, 0.1), transparent 30%),
|
||||||
|
linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(128, 198, 255, 0.1)),
|
||||||
|
rgba(8, 20, 38, 0.2);
|
||||||
|
border-color: var(--hud-border-hover);
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
||||||
|
inset 0 -1px 0 rgba(255, 255, 255, 0.08),
|
||||||
|
0 18px 36px rgba(0, 0, 0, 0.24),
|
||||||
|
0 0 28px rgba(145, 214, 255, 0.22);
|
||||||
|
}
|
||||||
|
|
||||||
|
.liquid-glass-surface:hover::before {
|
||||||
|
opacity: 0.62;
|
||||||
|
transform: scale(1.01);
|
||||||
|
}
|
||||||
|
|
||||||
|
.liquid-glass-surface:hover::after {
|
||||||
|
opacity: 0.96;
|
||||||
|
transform: scale(1.01);
|
||||||
|
}
|
||||||
|
|
||||||
|
.liquid-glass-surface:active,
|
||||||
|
.liquid-glass-surface.is-pressed {
|
||||||
|
--btn-scale: 0.942;
|
||||||
|
--press-offset: 2px;
|
||||||
|
--glow-opacity: 0.2;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.24), transparent 34%),
|
||||||
|
radial-gradient(circle at 50% 118%, rgba(255, 255, 255, 0.14), transparent 30%),
|
||||||
|
linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(146, 210, 255, 0.16)),
|
||||||
|
rgba(10, 24, 44, 0.24);
|
||||||
|
border-color: rgba(240, 249, 255, 0.58);
|
||||||
|
box-shadow:
|
||||||
|
inset 0 2px 10px rgba(0, 0, 0, 0.2),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.16),
|
||||||
|
0 4px 10px rgba(0, 0, 0, 0.18),
|
||||||
|
0 0 14px rgba(176, 226, 255, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.liquid-glass-surface:active::before,
|
||||||
|
.liquid-glass-surface.is-pressed::before {
|
||||||
|
opacity: 0.46;
|
||||||
|
transform: translateY(2px) scale(0.985);
|
||||||
|
}
|
||||||
|
|
||||||
|
.liquid-glass-surface:active::after,
|
||||||
|
.liquid-glass-surface.is-pressed::after {
|
||||||
|
opacity: 0.78;
|
||||||
|
transform: scale(0.985);
|
||||||
|
}
|
||||||
|
|
||||||
|
.liquid-glass-surface:active .icon,
|
||||||
|
.liquid-glass-surface.is-pressed .icon {
|
||||||
|
transform: translateY(1.5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.liquid-glass-surface:active img,
|
||||||
|
.liquid-glass-surface.is-pressed img,
|
||||||
|
.liquid-glass-surface:active .material-symbols-rounded,
|
||||||
|
.liquid-glass-surface.is-pressed .material-symbols-rounded {
|
||||||
|
transform: translateY(1.5px);
|
||||||
|
transition: transform 0.16s ease, opacity 0.16s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#zoom-control-group #zoom-toolbar .zoom-btn:active,
|
||||||
|
#zoom-control-group #zoom-toolbar .zoom-btn.is-pressed,
|
||||||
|
#zoom-control-group #zoom-toolbar .zoom-percent:active,
|
||||||
|
#zoom-control-group #zoom-toolbar .zoom-percent.is-pressed {
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.liquid-glass-surface.active {
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.18), transparent 34%),
|
||||||
|
linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(118, 200, 255, 0.14)),
|
||||||
|
rgba(11, 34, 58, 0.26);
|
||||||
|
border-color: var(--hud-border-active);
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.22),
|
||||||
|
inset 0 0 18px rgba(160, 220, 255, 0.14),
|
||||||
|
0 18px 34px rgba(0, 0, 0, 0.24),
|
||||||
|
0 0 30px rgba(145, 214, 255, 0.24);
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-btn svg {
|
.toolbar-btn svg {
|
||||||
width: 18px;
|
width: 20px;
|
||||||
height: 18px;
|
height: 20px;
|
||||||
stroke: currentColor;
|
stroke: currentColor;
|
||||||
stroke-width: 2.1;
|
stroke-width: 2.1;
|
||||||
fill: none;
|
fill: none;
|
||||||
@@ -407,18 +580,176 @@ input[type="range"]::-webkit-slider-thumb {
|
|||||||
stroke-linejoin: round;
|
stroke-linejoin: round;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.toolbar-btn .material-symbols-rounded {
|
||||||
|
font-size: 21px;
|
||||||
|
line-height: 1;
|
||||||
|
font-variation-settings:
|
||||||
|
'FILL' 0,
|
||||||
|
'wght' 500,
|
||||||
|
'GRAD' 0,
|
||||||
|
'opsz' 24;
|
||||||
|
color: currentColor;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
user-select: none;
|
||||||
|
pointer-events: none;
|
||||||
|
text-rendering: geometricPrecision;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-btn img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: block;
|
||||||
|
user-select: none;
|
||||||
|
pointer-events: none;
|
||||||
|
shape-rendering: geometricPrecision;
|
||||||
|
image-rendering: -webkit-optimize-contrast;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
#rotate-toggle .icon-play,
|
#rotate-toggle .icon-play,
|
||||||
#rotate-toggle.is-stopped .icon-pause {
|
#rotate-toggle.is-stopped .icon-pause,
|
||||||
|
#layout-toggle .layout-collapse,
|
||||||
|
#layout-toggle.active .layout-expand {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#rotate-toggle.is-stopped .icon-play {
|
#rotate-toggle.is-stopped .icon-play,
|
||||||
|
#layout-toggle.active .layout-collapse {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#zoom-control-group:hover #zoom-toolbar,
|
||||||
|
#zoom-control-group:focus-within #zoom-toolbar,
|
||||||
|
#zoom-control-group.open #zoom-toolbar,
|
||||||
|
#info-control-group:hover #info-toolbar,
|
||||||
|
#info-control-group:focus-within #info-toolbar,
|
||||||
|
#info-control-group.open #info-toolbar {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
pointer-events: auto;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
#zoom-control-group #zoom-toolbar .zoom-percent {
|
||||||
|
min-width: 0;
|
||||||
|
width: 42px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 42px;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 0.68rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: #4db8ff;
|
||||||
|
animation: floatDock 3.8s ease-in-out infinite;
|
||||||
|
animation-delay: 0.18s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#zoom-control-group #zoom-toolbar .zoom-percent:hover {
|
||||||
|
}
|
||||||
|
|
||||||
|
#zoom-control-group #zoom-toolbar,
|
||||||
|
#info-control-group #info-toolbar {
|
||||||
|
top: auto;
|
||||||
|
right: auto;
|
||||||
|
left: 50%;
|
||||||
|
bottom: calc(100% + 12px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info-toolbar .toolbar-btn:nth-child(1) {
|
||||||
|
animation-delay: 0.34s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info-toolbar .toolbar-btn:nth-child(2) {
|
||||||
|
animation-delay: 0.18s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info-toolbar .toolbar-btn:nth-child(3) {
|
||||||
|
animation-delay: 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info-toolbar .toolbar-btn:nth-child(4) {
|
||||||
|
animation-delay: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#zoom-control-group #zoom-toolbar .zoom-btn {
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
min-width: 42px;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: #4db8ff;
|
||||||
|
animation: floatDock 3.8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
#zoom-toolbar .zoom-btn:nth-child(1) {
|
||||||
|
animation-delay: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#zoom-toolbar .zoom-btn:nth-child(3) {
|
||||||
|
animation-delay: 0.34s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#zoom-control-group #zoom-toolbar .zoom-btn:hover {
|
||||||
|
}
|
||||||
|
|
||||||
|
#zoom-control-group #zoom-toolbar .zoom-btn:active,
|
||||||
|
#zoom-control-group #zoom-toolbar .zoom-percent:active {
|
||||||
|
}
|
||||||
|
|
||||||
|
#zoom-control-group #zoom-toolbar .tooltip {
|
||||||
|
bottom: calc(100% + 10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#zoom-control-group #zoom-toolbar .tooltip::after {
|
||||||
|
top: 100%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
border: 6px solid transparent;
|
||||||
|
border-top-color: rgba(77, 184, 255, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
#container.layout-expanded #info-panel {
|
||||||
|
top: 20px;
|
||||||
|
left: 20px;
|
||||||
|
transform: translate(calc(-100% + 20px), calc(-100% + 20px));
|
||||||
|
}
|
||||||
|
|
||||||
|
#container.layout-expanded #coordinates-display {
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
transform: translate(calc(100% - 20px), calc(-100% + 20px));
|
||||||
|
}
|
||||||
|
|
||||||
|
#container.layout-expanded #legend {
|
||||||
|
left: 20px;
|
||||||
|
bottom: 20px;
|
||||||
|
transform: translate(calc(-100% + 20px), calc(100% - 20px));
|
||||||
|
}
|
||||||
|
|
||||||
|
#container.layout-expanded #earth-stats {
|
||||||
|
right: 20px;
|
||||||
|
bottom: 20px;
|
||||||
|
transform: translate(calc(100% - 20px), calc(100% - 20px));
|
||||||
|
}
|
||||||
|
|
||||||
|
#container.layout-expanded #right-toolbar-group {
|
||||||
|
bottom: 18px;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
.toolbar-btn .tooltip {
|
.toolbar-btn .tooltip {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 50px;
|
bottom: 56px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
background: rgba(10, 10, 30, 0.95);
|
background: rgba(10, 10, 30, 0.95);
|
||||||
@@ -435,10 +766,12 @@ input[type="range"]::-webkit-slider-thumb {
|
|||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-btn:hover .tooltip {
|
.toolbar-btn:hover .tooltip,
|
||||||
|
.floating-popover-group:hover > .toolbar-btn .tooltip,
|
||||||
|
.floating-popover-group:focus-within > .toolbar-btn .tooltip {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
bottom: 52px;
|
bottom: 58px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-btn .tooltip::after {
|
.toolbar-btn .tooltip::after {
|
||||||
|
|||||||
@@ -1,18 +1,13 @@
|
|||||||
/* coordinates-display */
|
/* coordinates-display */
|
||||||
|
|
||||||
#coordinates-display {
|
#coordinates-display {
|
||||||
position: absolute;
|
|
||||||
top: 20px;
|
top: 20px;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
background-color: rgba(10, 10, 30, 0.85);
|
border-radius: 18px;
|
||||||
border-radius: 10px;
|
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
box-shadow: 0 0 20px rgba(0, 150, 255, 0.3);
|
|
||||||
border: 1px solid rgba(0, 150, 255, 0.2);
|
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
min-width: 180px;
|
min-width: 180px;
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#coordinates-display .coord-item {
|
#coordinates-display .coord-item {
|
||||||
|
|||||||
@@ -1,18 +1,13 @@
|
|||||||
/* earth-stats */
|
/* earth-stats */
|
||||||
|
|
||||||
#earth-stats {
|
#earth-stats {
|
||||||
position: absolute;
|
|
||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
background-color: rgba(10, 10, 30, 0.85);
|
border-radius: 18px;
|
||||||
border-radius: 10px;
|
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
width: 250px;
|
width: 250px;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
box-shadow: 0 0 20px rgba(0, 150, 255, 0.3);
|
|
||||||
border: 1px solid rgba(0, 150, 255, 0.2);
|
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#earth-stats .stats-item {
|
#earth-stats .stats-item {
|
||||||
@@ -31,18 +26,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#satellite-info {
|
#satellite-info {
|
||||||
position: absolute;
|
|
||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
right: 290px;
|
right: 290px;
|
||||||
background-color: rgba(10, 10, 30, 0.9);
|
border-radius: 18px;
|
||||||
border-radius: 10px;
|
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
width: 220px;
|
width: 220px;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
box-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
|
|
||||||
border: 1px solid rgba(0, 229, 255, 0.3);
|
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#satellite-info .stats-item {
|
#satellite-info .stats-item {
|
||||||
|
|||||||
@@ -1,17 +1,12 @@
|
|||||||
/* info-panel */
|
/* info-panel */
|
||||||
|
|
||||||
#info-panel {
|
#info-panel {
|
||||||
position: absolute;
|
|
||||||
top: 20px;
|
top: 20px;
|
||||||
left: 20px;
|
left: 20px;
|
||||||
background-color: rgba(10, 10, 30, 0.85);
|
border-radius: 18px;
|
||||||
border-radius: 10px;
|
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
width: 320px;
|
width: 320px;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
box-shadow: 0 0 20px rgba(0, 150, 255, 0.3);
|
|
||||||
border: 1px solid rgba(0, 150, 255, 0.2);
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#info-panel h1 {
|
#info-panel h1 {
|
||||||
@@ -159,8 +154,14 @@
|
|||||||
/* Info Card - Unified details panel (inside info-panel) */
|
/* Info Card - Unified details panel (inside info-panel) */
|
||||||
.info-card {
|
.info-card {
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
background: rgba(0, 0, 0, 0.3);
|
background:
|
||||||
border-radius: 8px;
|
linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(110, 176, 255, 0.04)),
|
||||||
|
rgba(7, 18, 36, 0.2);
|
||||||
|
border-radius: 14px;
|
||||||
|
border: 1px solid rgba(225, 242, 255, 0.12);
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
||||||
|
0 10px 24px rgba(0, 0, 0, 0.16);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
@@ -174,7 +175,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
background: rgba(77, 184, 255, 0.1);
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(77, 184, 255, 0.06));
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -189,16 +190,35 @@
|
|||||||
color: #4db8ff;
|
color: #4db8ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-card-content {
|
#info-card-content {
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
max-height: 200px;
|
max-height: 40vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: rgba(160, 220, 255, 0.45) transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info-card-content::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info-card-content::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info-card-content::-webkit-scrollbar-thumb {
|
||||||
|
background: linear-gradient(180deg, rgba(210, 237, 255, 0.32), rgba(110, 176, 255, 0.34));
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info-card-content::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: linear-gradient(180deg, rgba(232, 246, 255, 0.42), rgba(128, 198, 255, 0.46));
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-card-property {
|
.info-card-property {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 6px 0;
|
padding: 6px;
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -209,6 +229,12 @@
|
|||||||
.info-card-label {
|
.info-card-label {
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 0.18s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-card-label:hover {
|
||||||
|
color: #d9f1ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-card-value {
|
.info-card-value {
|
||||||
|
|||||||
@@ -1,23 +1,29 @@
|
|||||||
/* legend */
|
/* legend */
|
||||||
|
|
||||||
#legend {
|
#legend {
|
||||||
position: absolute;
|
|
||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
left: 20px;
|
left: 20px;
|
||||||
background-color: rgba(10, 10, 30, 0.85);
|
border-radius: 18px;
|
||||||
border-radius: 10px;
|
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
width: 220px;
|
width: 220px;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
box-shadow: 0 0 20px rgba(0, 150, 255, 0.3);
|
}
|
||||||
border: 1px solid rgba(0, 150, 255, 0.2);
|
|
||||||
backdrop-filter: blur(5px);
|
#legend .legend-title {
|
||||||
|
color: #4db8ff;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#legend .legend-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#legend .legend-item {
|
#legend .legend-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#legend .legend-color {
|
#legend .legend-color {
|
||||||
|
|||||||
@@ -18,8 +18,18 @@
|
|||||||
<link rel="stylesheet" href="css/coordinates-display.css">
|
<link rel="stylesheet" href="css/coordinates-display.css">
|
||||||
<link rel="stylesheet" href="css/legend.css">
|
<link rel="stylesheet" href="css/legend.css">
|
||||||
<link rel="stylesheet" href="css/earth-stats.css">
|
<link rel="stylesheet" href="css/earth-stats.css">
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,500,0,0">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<svg aria-hidden="true" width="0" height="0" style="position:absolute; width:0; height:0; pointer-events:none;">
|
||||||
|
<defs>
|
||||||
|
<filter id="liquid-glass-distortion" x="-20%" y="-20%" width="140%" height="140%">
|
||||||
|
<feTurbulence type="fractalNoise" baseFrequency="0.012 0.02" numOctaves="2" seed="7" result="noise" />
|
||||||
|
<feGaussianBlur in="noise" stdDeviation="0.45" result="softNoise" />
|
||||||
|
<feDisplacementMap in="SourceGraphic" in2="softNoise" scale="5.5" xChannelSelector="R" yChannelSelector="G" />
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
<div id="container">
|
<div id="container">
|
||||||
<div id="info-panel">
|
<div id="info-panel">
|
||||||
<h1>智能星球计划</h1>
|
<h1>智能星球计划</h1>
|
||||||
@@ -37,105 +47,92 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="right-toolbar-group">
|
<div id="right-toolbar-group">
|
||||||
<div id="zoom-toolbar">
|
|
||||||
<button id="reset-view" class="zoom-btn" title="重置视角">
|
|
||||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
||||||
<circle cx="12" cy="12" r="5"></circle>
|
|
||||||
<path d="M12 3v4"></path>
|
|
||||||
<path d="M12 17v4"></path>
|
|
||||||
<path d="M3 12h4"></path>
|
|
||||||
<path d="M17 12h4"></path>
|
|
||||||
<circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"></circle>
|
|
||||||
</svg>
|
|
||||||
<span class="tooltip">重置视角</span>
|
|
||||||
</button>
|
|
||||||
<button id="zoom-in" class="zoom-btn" title="放大">+<span class="tooltip">放大</span></button>
|
|
||||||
<span id="zoom-value" class="zoom-percent" title="重置缩放到100%">100%<span class="tooltip">重置缩放到100%</span></span>
|
|
||||||
<button id="zoom-out" class="zoom-btn" title="缩小">−<span class="tooltip">缩小</span></button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="control-toolbar">
|
<div id="control-toolbar">
|
||||||
<div class="toolbar-items">
|
<div class="toolbar-items">
|
||||||
<button id="rotate-toggle" class="toolbar-btn" title="自动旋转">
|
<button id="search-action" class="toolbar-btn floating-btn liquid-glass-surface" title="搜索功能（待开发）">
|
||||||
|
<span class="icon" aria-hidden="true">
|
||||||
|
<span class="material-symbols-rounded">search</span>
|
||||||
|
</span>
|
||||||
|
<span class="tooltip">搜索功能（待开发）</span>
|
||||||
|
</button>
|
||||||
|
<button id="rotate-toggle" class="toolbar-btn floating-btn liquid-glass-surface" title="自动旋转">
|
||||||
<span class="icon rotate-icon icon-pause" aria-hidden="true">
|
<span class="icon rotate-icon icon-pause" aria-hidden="true">
|
||||||
<svg viewBox="0 0 24 24">
|
<span class="material-symbols-rounded">pause</span>
|
||||||
<path d="M9 6v12"></path>
|
|
||||||
<path d="M15 6v12"></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
</span>
|
||||||
<span class="icon rotate-icon icon-play" aria-hidden="true">
|
<span class="icon rotate-icon icon-play" aria-hidden="true">
|
||||||
<svg viewBox="0 0 24 24">
|
<span class="material-symbols-rounded">play_arrow</span>
|
||||||
<path d="M8 6.5v11l9-5.5z" fill="currentColor" stroke="none"></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
</span>
|
||||||
<span class="tooltip">自动旋转</span>
|
<span class="tooltip">自动旋转</span>
|
||||||
</button>
|
</button>
|
||||||
<button id="toggle-cables" class="toolbar-btn active" title="显示/隐藏线缆">
|
<div id="info-control-group" class="floating-popover-group">
|
||||||
|
<button id="info-trigger" class="toolbar-btn floating-btn liquid-glass-surface" title="显示控制">
|
||||||
|
<span class="icon" aria-hidden="true">
|
||||||
|
<span class="material-symbols-rounded">info</span>
|
||||||
|
</span>
|
||||||
|
<span class="tooltip">显示控制</span>
|
||||||
|
</button>
|
||||||
|
<div id="info-toolbar" class="stack-toolbar">
|
||||||
|
<button id="toggle-terrain" class="toolbar-btn floating-btn liquid-glass-surface" title="显示/隐藏地形">
|
||||||
|
<span class="icon" aria-hidden="true">
|
||||||
|
<span class="material-symbols-rounded">terrain</span>
|
||||||
|
</span>
|
||||||
|
<span class="tooltip">显示/隐藏地形</span>
|
||||||
|
</button>
|
||||||
|
<button id="toggle-trails" class="toolbar-btn floating-btn liquid-glass-surface active" title="显示/隐藏轨迹">
|
||||||
|
<span class="icon" aria-hidden="true">
|
||||||
|
<span class="material-symbols-rounded">timeline</span>
|
||||||
|
</span>
|
||||||
|
<span class="tooltip">隐藏轨迹</span>
|
||||||
|
</button>
|
||||||
|
<button id="toggle-satellites" class="toolbar-btn floating-btn liquid-glass-surface" title="显示/隐藏卫星">
|
||||||
|
<span class="icon" aria-hidden="true">
|
||||||
|
<span class="material-symbols-rounded">satellite_alt</span>
|
||||||
|
</span>
|
||||||
|
<span class="tooltip">显示卫星</span>
|
||||||
|
</button>
|
||||||
|
<button id="toggle-cables" class="toolbar-btn floating-btn liquid-glass-surface active" title="显示/隐藏线缆">
|
||||||
|
<span class="icon" aria-hidden="true">
|
||||||
|
<span class="material-symbols-rounded">cable</span>
|
||||||
|
</span>
|
||||||
|
<span class="tooltip">隐藏线缆</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button id="reload-data" class="toolbar-btn floating-btn liquid-glass-surface" title="重新加载数据">
|
||||||
<span class="icon" aria-hidden="true">
|
<span class="icon" aria-hidden="true">
|
||||||
<svg viewBox="0 0 24 24">
|
<span class="material-symbols-rounded">refresh</span>
|
||||||
<circle cx="12" cy="12" r="6.5"></circle>
|
|
||||||
<path d="M5.8 12h12.4"></path>
|
|
||||||
<path d="M12 5.8a8.5 8.5 0 0 1 0 12.4"></path>
|
|
||||||
<path d="M8 16c2-1.8 6-1.8 8 0"></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<span class="tooltip">隐藏线缆</span>
|
|
||||||
</button>
|
|
||||||
<button id="toggle-terrain" class="toolbar-btn" title="显示/隐藏地形">
|
|
||||||
<span class="icon" aria-hidden="true">
|
|
||||||
<svg viewBox="0 0 24 24">
|
|
||||||
<path d="M3 18h18"></path>
|
|
||||||
<path d="M4.5 18l5-7 3 4 3.5-6 3.5 9"></path>
|
|
||||||
<path d="M11 18l2-3 1.5 2"></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<span class="tooltip">显示/隐藏地形</span>
|
|
||||||
</button>
|
|
||||||
<button id="toggle-satellites" class="toolbar-btn" title="显示/隐藏卫星">
|
|
||||||
<span class="icon" aria-hidden="true">
|
|
||||||
<svg viewBox="0 0 24 24">
|
|
||||||
<rect x="10" y="10" width="4" height="4" rx="0.8"></rect>
|
|
||||||
<rect x="4" y="9" width="4" height="6" rx="0.8"></rect>
|
|
||||||
<rect x="16" y="9" width="4" height="6" rx="0.8"></rect>
|
|
||||||
<path d="M8 12h2"></path>
|
|
||||||
<path d="M14 12h2"></path>
|
|
||||||
<path d="M12 8V6"></path>
|
|
||||||
<path d="M11 6h2"></path>
|
|
||||||
<path d="M12 14v4"></path>
|
|
||||||
<path d="M10 18h4"></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<span class="tooltip">显示卫星</span>
|
|
||||||
</button>
|
|
||||||
<button id="toggle-trails" class="toolbar-btn active" title="显示/隐藏轨迹">
|
|
||||||
<span class="icon" aria-hidden="true">
|
|
||||||
<svg viewBox="0 0 24 24">
|
|
||||||
<path d="M5 17h7"></path>
|
|
||||||
<path d="M7 13.5h8"></path>
|
|
||||||
<path d="M10 10h6"></path>
|
|
||||||
<circle cx="17.5" cy="8.5" r="2.2" fill="currentColor" stroke="none"></circle>
|
|
||||||
<path d="M15.8 10.2l2.8-2.8"></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<span class="tooltip">隐藏轨迹</span>
|
|
||||||
</button>
|
|
||||||
<button id="reload-data" class="toolbar-btn" title="重新加载数据">
|
|
||||||
<span class="icon" aria-hidden="true">
|
|
||||||
<svg viewBox="0 0 24 24">
|
|
||||||
<path d="M20 5v5h-5"></path>
|
|
||||||
<path d="M20 10a8 8 0 1 0 2 5"></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
</span>
|
||||||
<span class="tooltip">重新加载数据</span>
|
<span class="tooltip">重新加载数据</span>
|
||||||
</button>
|
</button>
|
||||||
|
<div id="zoom-control-group" class="floating-popover-group">
|
||||||
|
<button id="zoom-trigger" class="toolbar-btn floating-btn liquid-glass-surface" title="缩放控制">
|
||||||
|
<span class="icon" aria-hidden="true">
|
||||||
|
<span class="material-symbols-rounded">zoom_in</span>
|
||||||
|
</span>
|
||||||
|
<span class="tooltip">缩放控制</span>
|
||||||
|
</button>
|
||||||
|
<div id="zoom-toolbar" class="stack-toolbar">
|
||||||
|
<button id="zoom-in" class="zoom-btn liquid-glass-surface" title="放大">+<span class="tooltip">放大</span></button>
|
||||||
|
<span id="zoom-value" class="zoom-percent liquid-glass-surface" title="重置缩放到100%">100%<span class="tooltip">重置缩放到100%</span></span>
|
||||||
|
<button id="zoom-out" class="zoom-btn liquid-glass-surface" title="缩小">−<span class="tooltip">缩小</span></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button id="reset-view" class="toolbar-btn floating-btn liquid-glass-surface" title="重置视角">
|
||||||
|
<span class="icon" aria-hidden="true">
|
||||||
|
<span class="material-symbols-rounded">my_location</span>
|
||||||
|
</span>
|
||||||
|
<span class="tooltip">重置视角</span>
|
||||||
|
</button>
|
||||||
|
<button id="layout-toggle" class="toolbar-btn floating-btn liquid-glass-surface" title="最大化布局">
|
||||||
|
<span class="icon layout-icon layout-expand" aria-hidden="true">
|
||||||
|
<span class="material-symbols-rounded">open_in_full</span>
|
||||||
|
</span>
|
||||||
|
<span class="icon layout-icon layout-collapse" aria-hidden="true">
|
||||||
|
<span class="material-symbols-rounded">close_fullscreen</span>
|
||||||
|
</span>
|
||||||
|
<span class="tooltip">最大化布局</span>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button id="toolbar-toggle" class="toolbar-btn" title="展开/收起工具栏">
|
|
||||||
<span class="toggle-arrow" aria-hidden="true">
|
|
||||||
<svg viewBox="0 0 24 24">
|
|
||||||
<path d="M15 6l-6 6 6 6"></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -154,22 +151,24 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="legend">
|
<div id="legend">
|
||||||
<h3 style="color:#4db8ff; margin-bottom:10px; font-size:1.1rem;">图例</h3>
|
<h3 class="legend-title">线缆图例</h3>
|
||||||
<div class="legend-item">
|
<div class="legend-list">
|
||||||
<div class="legend-color" style="background-color: #ff4444;"></div>
|
<div class="legend-item">
|
||||||
<span>Americas II</span>
|
<div class="legend-color" style="background-color: #ff4444;"></div>
|
||||||
</div>
|
<span>Americas II</span>
|
||||||
<div class="legend-item">
|
</div>
|
||||||
<div class="legend-color" style="background-color: #44ff44;"></div>
|
<div class="legend-item">
|
||||||
<span>AU Aleutian A</span>
|
<div class="legend-color" style="background-color: #44ff44;"></div>
|
||||||
</div>
|
<span>AU Aleutian A</span>
|
||||||
<div class="legend-item">
|
</div>
|
||||||
<div class="legend-color" style="background-color: #4444ff;"></div>
|
<div class="legend-item">
|
||||||
<span>AU Aleutian B</span>
|
<div class="legend-color" style="background-color: #4444ff;"></div>
|
||||||
</div>
|
<span>AU Aleutian B</span>
|
||||||
<div class="legend-item">
|
</div>
|
||||||
<div class="legend-color" style="background-color: #ffff44;"></div>
|
<div class="legend-item">
|
||||||
<span>其他电缆</span>
|
<div class="legend-color" style="background-color: #ffff44;"></div>
|
||||||
|
<span>其他电缆</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ import { CONFIG, CABLE_COLORS, PATHS, CABLE_STATE } from "./constants.js";
|
|||||||
import { latLonToVector3 } from "./utils.js";
|
import { latLonToVector3 } from "./utils.js";
|
||||||
import { updateEarthStats, showStatusMessage } from "./ui.js";
|
import { updateEarthStats, showStatusMessage } from "./ui.js";
|
||||||
import { showInfoCard } from "./info-card.js";
|
import { showInfoCard } from "./info-card.js";
|
||||||
|
import { setLegendMode } from "./legend.js";
|
||||||
|
|
||||||
export let cableLines = [];
|
export let cableLines = [];
|
||||||
export let landingPoints = [];
|
export let landingPoints = [];
|
||||||
@@ -383,6 +384,7 @@ export function handleCableClick(cable) {
|
|||||||
lockedCable = cable;
|
lockedCable = cable;
|
||||||
|
|
||||||
const data = cable.userData;
|
const data = cable.userData;
|
||||||
|
setLegendMode("cables");
|
||||||
showInfoCard("cable", {
|
showInfoCard("cable", {
|
||||||
name: data.name,
|
name: data.name,
|
||||||
owner: data.owner,
|
owner: data.owner,
|
||||||
|
|||||||
135
frontend/public/earth/js/controls.js
vendored
135
frontend/public/earth/js/controls.js
vendored
@@ -16,6 +16,7 @@ export let autoRotate = true;
|
|||||||
export let zoomLevel = 1.0;
|
export let zoomLevel = 1.0;
|
||||||
export let showTerrain = false;
|
export let showTerrain = false;
|
||||||
export let isDragging = false;
|
export let isDragging = false;
|
||||||
|
export let layoutExpanded = false;
|
||||||
|
|
||||||
let earthObj = null;
|
let earthObj = null;
|
||||||
let listeners = [];
|
let listeners = [];
|
||||||
@@ -43,6 +44,7 @@ export function setupControls(camera, renderer, scene, earth) {
|
|||||||
setupWheelZoom(camera, renderer);
|
setupWheelZoom(camera, renderer);
|
||||||
setupRotateControls(camera, earth);
|
setupRotateControls(camera, earth);
|
||||||
setupTerrainControls();
|
setupTerrainControls();
|
||||||
|
setupLiquidGlassInteractions();
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupZoomControls(camera) {
|
function setupZoomControls(camera) {
|
||||||
@@ -285,13 +287,18 @@ function setupRotateControls(camera) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function setupTerrainControls() {
|
function setupTerrainControls() {
|
||||||
|
const container = document.getElementById("container");
|
||||||
|
const searchBtn = document.getElementById("search-action");
|
||||||
|
const infoGroup = document.getElementById("info-control-group");
|
||||||
|
const infoTrigger = document.getElementById("info-trigger");
|
||||||
const terrainBtn = document.getElementById("toggle-terrain");
|
const terrainBtn = document.getElementById("toggle-terrain");
|
||||||
const satellitesBtn = document.getElementById("toggle-satellites");
|
const satellitesBtn = document.getElementById("toggle-satellites");
|
||||||
const trailsBtn = document.getElementById("toggle-trails");
|
const trailsBtn = document.getElementById("toggle-trails");
|
||||||
const cablesBtn = document.getElementById("toggle-cables");
|
const cablesBtn = document.getElementById("toggle-cables");
|
||||||
|
const layoutBtn = document.getElementById("layout-toggle");
|
||||||
const reloadBtn = document.getElementById("reload-data");
|
const reloadBtn = document.getElementById("reload-data");
|
||||||
const toolbarToggle = document.getElementById("toolbar-toggle");
|
const zoomGroup = document.getElementById("zoom-control-group");
|
||||||
const toolbar = document.getElementById("control-toolbar");
|
const zoomTrigger = document.getElementById("zoom-trigger");
|
||||||
|
|
||||||
if (trailsBtn) {
|
if (trailsBtn) {
|
||||||
trailsBtn.classList.add("active");
|
trailsBtn.classList.add("active");
|
||||||
@@ -299,6 +306,10 @@ function setupTerrainControls() {
|
|||||||
if (tooltip) tooltip.textContent = "隐藏轨迹";
|
if (tooltip) tooltip.textContent = "隐藏轨迹";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
bindListener(searchBtn, "click", () => {
|
||||||
|
showStatusMessage("搜索功能待开发", "info");
|
||||||
|
});
|
||||||
|
|
||||||
bindListener(terrainBtn, "click", function () {
|
bindListener(terrainBtn, "click", function () {
|
||||||
showTerrain = !showTerrain;
|
showTerrain = !showTerrain;
|
||||||
toggleTerrain(showTerrain);
|
toggleTerrain(showTerrain);
|
||||||
@@ -352,11 +363,102 @@ function setupTerrainControls() {
|
|||||||
await reloadData();
|
await reloadData();
|
||||||
});
|
});
|
||||||
|
|
||||||
if (toolbarToggle && toolbar) {
|
bindListener(zoomTrigger, "click", (event) => {
|
||||||
bindListener(toolbarToggle, "click", () => {
|
event.stopPropagation();
|
||||||
toolbar.classList.toggle("collapsed");
|
infoGroup?.classList.remove("open");
|
||||||
|
zoomGroup?.classList.toggle("open");
|
||||||
|
});
|
||||||
|
|
||||||
|
bindListener(zoomGroup, "click", (event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
});
|
||||||
|
|
||||||
|
bindListener(infoTrigger, "click", (event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
zoomGroup?.classList.remove("open");
|
||||||
|
infoGroup?.classList.toggle("open");
|
||||||
|
});
|
||||||
|
|
||||||
|
bindListener(infoGroup, "click", (event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
});
|
||||||
|
|
||||||
|
bindListener(document, "click", (event) => {
|
||||||
|
if (zoomGroup?.classList.contains("open")) {
|
||||||
|
if (!zoomGroup.contains(event.target)) {
|
||||||
|
zoomGroup.classList.remove("open");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (infoGroup?.classList.contains("open")) {
|
||||||
|
if (!infoGroup.contains(event.target)) {
|
||||||
|
infoGroup.classList.remove("open");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
bindListener(layoutBtn, "click", () => {
|
||||||
|
const expanded = toggleLayoutExpanded(container);
|
||||||
|
showStatusMessage(expanded ? "布局已最大化" : "布局已恢复", "info");
|
||||||
|
});
|
||||||
|
|
||||||
|
updateLayoutUI(container);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupLiquidGlassInteractions() {
|
||||||
|
const surfaces = document.querySelectorAll(".liquid-glass-surface");
|
||||||
|
|
||||||
|
const resetSurface = (surface) => {
|
||||||
|
surface.style.setProperty("--elastic-x", "0px");
|
||||||
|
surface.style.setProperty("--elastic-y", "0px");
|
||||||
|
surface.style.setProperty("--tilt-x", "0deg");
|
||||||
|
surface.style.setProperty("--tilt-y", "0deg");
|
||||||
|
surface.style.setProperty("--glow-x", "50%");
|
||||||
|
surface.style.setProperty("--glow-y", "22%");
|
||||||
|
surface.style.setProperty("--glow-opacity", "0.24");
|
||||||
|
surface.classList.remove("is-pressed");
|
||||||
|
};
|
||||||
|
|
||||||
|
surfaces.forEach((surface) => {
|
||||||
|
resetSurface(surface);
|
||||||
|
|
||||||
|
bindListener(surface, "pointermove", (event) => {
|
||||||
|
const rect = surface.getBoundingClientRect();
|
||||||
|
const px = (event.clientX - rect.left) / rect.width;
|
||||||
|
const py = (event.clientY - rect.top) / rect.height;
|
||||||
|
const offsetX = (px - 0.5) * 6;
|
||||||
|
const offsetY = (py - 0.5) * 6;
|
||||||
|
const tiltX = (0.5 - py) * 8;
|
||||||
|
const tiltY = (px - 0.5) * 10;
|
||||||
|
|
||||||
|
surface.style.setProperty("--elastic-x", `${offsetX.toFixed(2)}px`);
|
||||||
|
surface.style.setProperty("--elastic-y", `${offsetY.toFixed(2)}px`);
|
||||||
|
surface.style.setProperty("--tilt-x", `${tiltX.toFixed(2)}deg`);
|
||||||
|
surface.style.setProperty("--tilt-y", `${tiltY.toFixed(2)}deg`);
|
||||||
|
surface.style.setProperty("--glow-x", `${(px * 100).toFixed(1)}%`);
|
||||||
|
surface.style.setProperty("--glow-y", `${(py * 100).toFixed(1)}%`);
|
||||||
|
surface.style.setProperty("--glow-opacity", "0.34");
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
bindListener(surface, "pointerenter", () => {
|
||||||
|
surface.style.setProperty("--glow-opacity", "0.28");
|
||||||
|
});
|
||||||
|
|
||||||
|
bindListener(surface, "pointerleave", () => {
|
||||||
|
resetSurface(surface);
|
||||||
|
});
|
||||||
|
|
||||||
|
bindListener(surface, "pointerdown", () => {
|
||||||
|
surface.classList.add("is-pressed");
|
||||||
|
});
|
||||||
|
|
||||||
|
bindListener(surface, "pointerup", () => {
|
||||||
|
surface.classList.remove("is-pressed");
|
||||||
|
});
|
||||||
|
|
||||||
|
bindListener(surface, "pointercancel", () => {
|
||||||
|
resetSurface(surface);
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export function teardownControls() {
|
export function teardownControls() {
|
||||||
@@ -396,3 +498,24 @@ export function getZoomLevel() {
|
|||||||
export function getShowTerrain() {
|
export function getShowTerrain() {
|
||||||
return showTerrain;
|
return showTerrain;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function updateLayoutUI(container) {
|
||||||
|
if (container) {
|
||||||
|
container.classList.toggle("layout-expanded", layoutExpanded);
|
||||||
|
}
|
||||||
|
|
||||||
|
const btn = document.getElementById("layout-toggle");
|
||||||
|
if (btn) {
|
||||||
|
btn.classList.toggle("active", layoutExpanded);
|
||||||
|
const tooltip = btn.querySelector(".tooltip");
|
||||||
|
const nextLabel = layoutExpanded ? "恢复布局" : "最大化布局";
|
||||||
|
btn.title = nextLabel;
|
||||||
|
if (tooltip) tooltip.textContent = nextLabel;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleLayoutExpanded(container) {
|
||||||
|
layoutExpanded = !layoutExpanded;
|
||||||
|
updateLayoutUI(container);
|
||||||
|
return layoutExpanded;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
// info-card.js - Unified info card module
|
// info-card.js - Unified info card module
|
||||||
|
import { showStatusMessage } from './ui.js';
|
||||||
|
|
||||||
let currentType = null;
|
let currentType = null;
|
||||||
|
|
||||||
@@ -55,7 +56,32 @@ const CARD_CONFIG = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export function initInfoCard() {
|
export function initInfoCard() {
|
||||||
// Close button removed - now uses external clear button
|
const content = document.getElementById('info-card-content');
|
||||||
|
if (!content || content.dataset.copyBound === 'true') return;
|
||||||
|
|
||||||
|
content.addEventListener('click', async (event) => {
|
||||||
|
const label = event.target.closest('.info-card-label');
|
||||||
|
if (!label) return;
|
||||||
|
|
||||||
|
const property = label.closest('.info-card-property');
|
||||||
|
const valueEl = property?.querySelector('.info-card-value');
|
||||||
|
const value = valueEl?.textContent?.trim();
|
||||||
|
|
||||||
|
if (!value || value === '-') {
|
||||||
|
showStatusMessage('无可复制内容', 'warning');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(value);
|
||||||
|
showStatusMessage(`已复制${label.textContent}：${value}`, 'success');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Copy failed:', error);
|
||||||
|
showStatusMessage('复制失败', 'error');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
content.dataset.copyBound = 'true';
|
||||||
}
|
}
|
||||||
|
|
||||||
export function setInfoCardNoBorder(noBorder = true) {
|
export function setInfoCardNoBorder(noBorder = true) {
|
||||||
|
|||||||
59
frontend/public/earth/js/legend.js
Normal file
59
frontend/public/earth/js/legend.js
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
const LEGEND_MODES = {
|
||||||
|
cables: {
|
||||||
|
title: "线缆图例",
|
||||||
|
items: [
|
||||||
|
{ color: "#ff4444", label: "Americas II" },
|
||||||
|
{ color: "#44ff44", label: "AU Aleutian A" },
|
||||||
|
{ color: "#4444ff", label: "AU Aleutian B" },
|
||||||
|
{ color: "#ffff44", label: "其他电缆" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
satellites: {
|
||||||
|
title: "卫星图例",
|
||||||
|
items: [
|
||||||
|
{ color: "#4db8ff", label: "卫星本体" },
|
||||||
|
{ color: "#9be7ff", label: "卫星轨迹" },
|
||||||
|
{ color: "#7dffb3", label: "悬停高亮" },
|
||||||
|
{ color: "#ffd166", label: "选中目标" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
let currentLegendMode = "cables";
|
||||||
|
|
||||||
|
export function initLegend() {
|
||||||
|
renderLegend(currentLegendMode);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setLegendMode(mode) {
|
||||||
|
const nextMode = LEGEND_MODES[mode] ? mode : "cables";
|
||||||
|
if (nextMode === currentLegendMode) return;
|
||||||
|
currentLegendMode = nextMode;
|
||||||
|
renderLegend(currentLegendMode);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getLegendMode() {
|
||||||
|
return currentLegendMode;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderLegend(mode) {
|
||||||
|
const legend = document.getElementById("legend");
|
||||||
|
if (!legend) return;
|
||||||
|
|
||||||
|
const config = LEGEND_MODES[mode] || LEGEND_MODES.cables;
|
||||||
|
const itemsHtml = config.items
|
||||||
|
.map(
|
||||||
|
(item) => `
|
||||||
|
<div class="legend-item">
|
||||||
|
<div class="legend-color" style="background-color: ${item.color};"></div>
|
||||||
|
<span>${item.label}</span>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
)
|
||||||
|
.join("");
|
||||||
|
|
||||||
|
legend.innerHTML = `
|
||||||
|
<h3 class="legend-title">${config.title}</h3>
|
||||||
|
<div class="legend-list">${itemsHtml}</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
@@ -74,6 +74,7 @@ import {
|
|||||||
hideInfoCard,
|
hideInfoCard,
|
||||||
setInfoCardNoBorder,
|
setInfoCardNoBorder,
|
||||||
} from "./info-card.js";
|
} from "./info-card.js";
|
||||||
|
import { initLegend, setLegendMode } from "./legend.js";
|
||||||
|
|
||||||
export let scene;
|
export let scene;
|
||||||
export let camera;
|
export let camera;
|
||||||
@@ -194,6 +195,7 @@ function isSameCable(cable1, cable2) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function showCableInfo(cable) {
|
function showCableInfo(cable) {
|
||||||
|
setLegendMode("cables");
|
||||||
showInfoCard("cable", {
|
showInfoCard("cable", {
|
||||||
name: cable.userData.name,
|
name: cable.userData.name,
|
||||||
owner: cable.userData.owner,
|
owner: cable.userData.owner,
|
||||||
@@ -211,6 +213,7 @@ function showSatelliteInfo(props) {
|
|||||||
const perigee = (6371 * (1 - ecc)).toFixed(0);
|
const perigee = (6371 * (1 - ecc)).toFixed(0);
|
||||||
const apogee = (6371 * (1 + ecc)).toFixed(0);
|
const apogee = (6371 * (1 + ecc)).toFixed(0);
|
||||||
|
|
||||||
|
setLegendMode("satellites");
|
||||||
showInfoCard("satellite", {
|
showInfoCard("satellite", {
|
||||||
name: props?.name || "-",
|
name: props?.name || "-",
|
||||||
norad_id: props?.norad_cat_id,
|
norad_id: props?.norad_cat_id,
|
||||||
@@ -333,6 +336,7 @@ export function init() {
|
|||||||
|
|
||||||
addLights();
|
addLights();
|
||||||
initInfoCard();
|
initInfoCard();
|
||||||
|
initLegend();
|
||||||
const earthObj = createEarth(scene);
|
const earthObj = createEarth(scene);
|
||||||
targetRotation = {
|
targetRotation = {
|
||||||
x: earthObj.rotation.x,
|
x: earthObj.rotation.x,
|
||||||
|
|||||||
@@ -1,6 +1,8 @@
|
|||||||
// ui.js - UI update functions
|
// ui.js - UI update functions
|
||||||
|
|
||||||
let statusTimeoutId = null;
|
let statusTimeoutId = null;
|
||||||
|
let statusHideTimeoutId = null;
|
||||||
|
let statusReplayTimeoutId = null;
|
||||||
|
|
||||||
// Show status message
|
// Show status message
|
||||||
export function showStatusMessage(message, type = "info") {
|
export function showStatusMessage(message, type = "info") {
|
||||||
@@ -12,15 +14,44 @@ export function showStatusMessage(message, type = "info") {
|
|||||||
statusTimeoutId = null;
|
statusTimeoutId = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
statusEl.textContent = message;
|
if (statusHideTimeoutId) {
|
||||||
statusEl.className = `status-message ${type}`;
|
clearTimeout(statusHideTimeoutId);
|
||||||
statusEl.style.display = "block";
|
statusHideTimeoutId = null;
|
||||||
|
}
|
||||||
|
|
||||||
statusTimeoutId = setTimeout(() => {
|
if (statusReplayTimeoutId) {
|
||||||
statusEl.style.display = "none";
|
clearTimeout(statusReplayTimeoutId);
|
||||||
statusEl.textContent = "";
|
statusReplayTimeoutId = null;
|
||||||
statusTimeoutId = null;
|
}
|
||||||
}, 3000);
|
|
||||||
|
const startShow = () => {
|
||||||
|
statusEl.textContent = message;
|
||||||
|
statusEl.className = `status-message ${type}`;
|
||||||
|
statusEl.style.display = "block";
|
||||||
|
statusEl.offsetHeight;
|
||||||
|
statusEl.classList.add("visible");
|
||||||
|
|
||||||
|
statusTimeoutId = setTimeout(() => {
|
||||||
|
statusEl.classList.remove("visible");
|
||||||
|
statusHideTimeoutId = setTimeout(() => {
|
||||||
|
statusEl.style.display = "none";
|
||||||
|
statusEl.textContent = "";
|
||||||
|
statusHideTimeoutId = null;
|
||||||
|
}, 280);
|
||||||
|
statusTimeoutId = null;
|
||||||
|
}, 3000);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (statusEl.classList.contains("visible")) {
|
||||||
|
statusEl.classList.remove("visible");
|
||||||
|
statusReplayTimeoutId = setTimeout(() => {
|
||||||
|
startShow();
|
||||||
|
statusReplayTimeoutId = null;
|
||||||
|
}, 180);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
startShow();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update coordinates display
|
// Update coordinates display
|
||||||
|
|||||||
Reference in New Issue
Block a user