Commit: 8c9948b4c3520a7c7556faee5967842a3a0697b8
Author: Oliver teal@Olivers-MacBook-Pro.local
Date: Sat May 3 14:07:28 2025 -0500
This commit includes various aesthetic tweaks to improve the visual appearance and animation timing of the simulation interface.
- src/components/LoadingOverlay.jsx
- src/pages/ConfigPage/ConfigPage.jsx
- src/pages/ConfigPage/components/GlobeMap.jsx
- src/pages/SimulationExperience/SimulationExperience.jsx
@@ -20,7 +20,7 @@ const LoadingOverlay = ({ isVisible }) => {
<div
className="fixed inset-0 z-[100] flex items-center justify-center transition-opacity duration-500"
style={{
- background: 'linear-gradient(to bottom right, #0f172a, #1e293b)',
+ background: 'linear-gradient(to bottom right, #0e1525, #1c2636)',
opacity: 1,
}}
>@@ -1041,14 +1041,14 @@ const ConfigPage = ({ setGlobalLoading }) => {
{/* Content */}
<div className="relative z-10">
- <div className="flex items-center gap-2 mb-[18px] text-blue-300/50">
+ <div className="flex items-center gap-2 mb-[18px] text-blue-300/[0.44]">
<Info
className="h-4 w-4 cursor-pointer translate-y-[1px]"
onMouseEnter={showAgentInfoTooltip}
onMouseLeave={hideAgentInfoTooltip}
/>
<h3 className="text-lg font-light">Physical Specs</h3>
- {/* Agent Information, Embodied Agent Spec, Agent Embodiment, Physical Spec(s), Agent Embodiement, Embodiement, Agent Spec, Agent Information, System Spec, etc and more are options */}
+ {/* Info, Agent Information, Embodied Agent Spec, Agent Embodiment, Physical Spec(s), Agent Embodiement, Embodiement, Agent Spec, Agent Information, System Spec, etc and more are options */}
</div>
<div className="grid grid-cols-2 gap-x-4 gap-y-[18px]">@@ -698,7 +698,7 @@ const GlobeMap = () => {
left: '12px',
padding: '8px 14px',
borderRadius: '4px',
- zIndex: 4, // Above blur overlay
+ zIndex: 1, // Always below the city selection overlay
color: 'rgba(176, 224, 253, 1)', // Pale blue color with slightly more blue tint
fontWeight: '400',
letterSpacing: '0.05em',
@@ -785,7 +785,7 @@ const GlobeMap = () => {
transform: 'translateY(-50%)',
left: '12px',
right: '12px',
- zIndex: 4, // Above blur overlay (2)
+ zIndex: 5, // Above the blur overlay (2) and deployment location (1-4)
pointerEvents: 'auto' // Ensure the panel is interactive
}}
>
@@ -806,7 +806,7 @@ const GlobeMap = () => {
position: 'absolute',
top: '12px',
right: '50px', // Position to the left of the map controls
- zIndex: showCitySelection ? 1 : 4, // Below blur overlay when city selection is active, otherwise above
+ zIndex: 1, // Always below the city selection overlay
pointerEvents: 'none' // Allow clicks to pass through to the button only
}}
>@@ -71,9 +71,9 @@ export default function SimulationExperience() {
setTimeout(() => {
console.log('[SimulationExperience] Fading in day value');
setDayValueVisible(true);
- }, 800); // Delay before day value appears
+ }, 770); // Delay before day value appears
- }, 800); // Delay before time value appears
+ }, 770); // Delay before time value appears
}, 400); // Initial delay after overlay disappears
}
@@ -153,7 +153,7 @@ export default function SimulationExperience() {
<div className="w-[35.167%] bg-slate-800/40 backdrop-blur-sm rounded-md border border-slate-700/50 p-2 h-12 flex items-center">
<div className="flex justify-between items-center w-full px-1">
<span className="text-slate-400 text-opacity-90 text-sm">Location</span>
- <span className={`text-blue-300 text-opacity-90 font-medium transition-opacity duration-500 ease-in-out ${locationValueVisible ? 'opacity-100' : 'opacity-0'}`}>Berlin, DE</span>
+ <span className={`text-blue-300 text-opacity-90 font-medium transition-opacity duration-465 ease-in-out ${locationValueVisible ? 'opacity-100' : 'opacity-0'}`}>Berlin, DE</span>
</div>
</div>
@@ -161,7 +161,7 @@ export default function SimulationExperience() {
<div className="w-[35.167%] bg-slate-800/40 backdrop-blur-sm rounded-md border border-slate-700/50 p-2 h-12 flex items-center">
<div className="flex justify-between items-center w-full px-1">
<span className="text-slate-400 text-opacity-90 text-sm">Time</span>
- <span className={`text-blue-300 text-opacity-90 font-medium transition-opacity duration-500 ease-in-out ${timeValueVisible ? 'opacity-100' : 'opacity-0'}`}>{currentTime}</span>
+ <span className={`text-blue-300 text-opacity-90 font-medium transition-opacity duration-465 ease-in-out ${timeValueVisible ? 'opacity-100' : 'opacity-0'}`}>{currentTime}</span>
</div>
</div>
@@ -169,7 +169,7 @@ export default function SimulationExperience() {
<div className="w-[22.42%] bg-slate-800/40 backdrop-blur-sm rounded-md border border-slate-700/50 p-2 h-12 flex items-center">
<div className="flex justify-between items-center w-full px-1">
<span className="text-slate-400 text-opacity-90 text-sm">Day</span>
- <span className={`text-blue-300 text-opacity-90 font-medium transition-opacity duration-500 ease-in-out ${dayValueVisible ? 'opacity-100' : 'opacity-0'}`}>1</span>
+ <span className={`text-blue-300 text-opacity-90 font-medium transition-opacity duration-465 ease-in-out ${dayValueVisible ? 'opacity-100' : 'opacity-0'}`}>1</span>
</div>
</div>
@@ -211,7 +211,7 @@ export default function SimulationExperience() {
<GlassContainer
imageSrc="/wide.webp"
enablePanning={false}
- imageOpacity={0.0} // 35-60 seems like a good range maybe?
+ imageOpacity={0.43} // 35-60 seems like a good range maybe?
onPause={handlePauseSimulation} // Connect the pause handler to the GlassContainer
/>
</div>