5
This commit is contained in:
Flatlogic Bot
parent
c7397852b7
commit
94fcde74c9
@ -16,67 +16,88 @@ import {
|
||||
mdiAutoFix,
|
||||
mdiAccountGroup,
|
||||
mdiStarCircle,
|
||||
mdiChatProcessingOutline
|
||||
mdiChatProcessingOutline,
|
||||
mdiSend,
|
||||
} from '@mdi/js';
|
||||
import BaseIcon from '../components/BaseIcon';
|
||||
import { useAppDispatch } from '../stores/hooks';
|
||||
import { useAppDispatch, useAppSelector } from '../stores/hooks';
|
||||
import { fetch as fetchSkyObjects } from '../stores/sky_objects/sky_objectsSlice';
|
||||
import { askGpt } from '../stores/openAiSlice';
|
||||
import LayoutAuthenticated from '../layouts/Authenticated';
|
||||
|
||||
const CELEBRITIES = [
|
||||
{ id: 'beyonce', name: 'Beyoncé', category: 'Singer', reaction: 'This view is absolutely flawless! Like a diamond in the sky.' },
|
||||
{ id: 'jackson', name: 'Michael Jackson', category: 'Singer', reaction: 'Hee-hee! Looking at the stars is a thriller!' },
|
||||
{ id: 'mercury', name: 'Freddie Mercury', category: 'Singer', reaction: 'I see a little silhouetto of a galaxy! Magnificent!' },
|
||||
{ id: 'swift', name: 'Taylor Swift', category: 'Singer', reaction: 'I can see the sparks fly in that nebula. Enchanting!' },
|
||||
{ id: 'dicaprio', name: 'Leonardo DiCaprio', category: 'Actor', reaction: 'I\'m the king of the world... or at least this telescope!' },
|
||||
{ id: 'streep', name: 'Meryl Streep', category: 'Actress', reaction: 'The performance of these celestial bodies is award-worthy.' },
|
||||
{ id: 'hanks', name: 'Tom Hanks', category: 'Actor', reaction: 'Houston, we have an incredible view here!' },
|
||||
{ id: 'davinci', name: 'Leonardo da Vinci', category: 'Painter', reaction: 'The proportions of this universe are divine. A true masterpiece.' },
|
||||
{ id: 'vangogh', name: 'Vincent van Gogh', category: 'Painter', reaction: 'The starry night... it\'s even more vibrant than I painted it!' },
|
||||
{ id: 'kahlo', name: 'Frida Kahlo', category: 'Painter', reaction: 'Feet, what do I need them for if I have wings to fly to these stars?' },
|
||||
{
|
||||
id: 'beyonce',
|
||||
name: 'Beyoncé',
|
||||
category: 'Singer',
|
||||
img: 'https://images.pexels.com/photos/2747449/pexels-photo-2747449.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
personality: 'Elegant, confident, and uses musical metaphors. Calls fans "Hive".',
|
||||
reaction: 'This view is absolutely flawless! Like a diamond in the sky.'
|
||||
},
|
||||
{
|
||||
id: 'jackson',
|
||||
name: 'Michael Jackson',
|
||||
category: 'Singer',
|
||||
img: 'https://images.pexels.com/photos/167441/pexels-photo-167441.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
personality: 'Energetic, kind, uses catchphrases like "Hee-hee" and "Shamone". Loves the magic of nature.',
|
||||
reaction: 'Hee-hee! Looking at the stars is a thriller!'
|
||||
},
|
||||
{
|
||||
id: 'mercury',
|
||||
name: 'Freddie Mercury',
|
||||
category: 'Singer',
|
||||
img: 'https://images.pexels.com/photos/1763075/pexels-photo-1763075.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
personality: 'Theatrical, flamboyant, and grand. Loves opera and drama.',
|
||||
reaction: 'I see a little silhouetto of a galaxy! Magnificent!'
|
||||
},
|
||||
{
|
||||
id: 'swift',
|
||||
name: 'Taylor Swift',
|
||||
category: 'Singer',
|
||||
img: 'https://images.pexels.com/photos/1105666/pexels-photo-1105666.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
personality: 'Storyteller, poetic, mentions "eras" and "sparks flying". Very relatable and friendly.',
|
||||
reaction: 'I can see the sparks fly in that nebula. Enchanting!'
|
||||
},
|
||||
{
|
||||
id: 'dicaprio',
|
||||
name: 'Leonardo DiCaprio',
|
||||
category: 'Actor',
|
||||
img: 'https://images.pexels.com/photos/1587009/pexels-photo-1587009.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
personality: 'Passionate about the environment and exploration. Intense and focused.',
|
||||
reaction: 'I\'m the king of the world... or at least this telescope!'
|
||||
},
|
||||
{
|
||||
id: 'streep',
|
||||
name: 'Meryl Streep',
|
||||
category: 'Actress',
|
||||
img: 'https://images.pexels.com/photos/2836486/pexels-photo-2836486.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
personality: 'Sophisticated, masterful, and appreciates fine detail and craft.',
|
||||
reaction: 'The performance of these celestial bodies is award-worthy.'
|
||||
},
|
||||
{
|
||||
id: 'davinci',
|
||||
name: 'Leonardo da Vinci',
|
||||
category: 'Painter',
|
||||
img: 'https://images.pexels.com/photos/33152/european-rari-da-vinci-mona-lisa.jpg?auto=compress&cs=tinysrgb&w=400',
|
||||
personality: 'Scientific, curious, observant. Mentions geometry and anatomy of the universe.',
|
||||
reaction: 'The proportions of this universe are divine. A true masterpiece.'
|
||||
},
|
||||
{
|
||||
id: 'vangogh',
|
||||
name: 'Vincent van Gogh',
|
||||
category: 'Painter',
|
||||
img: 'https://images.pexels.com/photos/161154/vincents-bedroom-in-arles-vincent-van-gogh-artist-painting-161154.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
personality: 'Emotional, sensitive to light and color. Sees swirls in the sky.',
|
||||
reaction: 'The starry night... it\'s even more vibrant than I painted it!'
|
||||
}
|
||||
];
|
||||
|
||||
const PRESET_TARGETS = [
|
||||
{
|
||||
id: 'mars',
|
||||
name: 'Mars',
|
||||
type: 'Planet',
|
||||
img: 'https://images-assets.nasa.gov/image/PIA04591/PIA04591~medium.jpg',
|
||||
dist: '225M km',
|
||||
temp: '210K'
|
||||
},
|
||||
{
|
||||
id: 'jupiter',
|
||||
name: 'Jupiter',
|
||||
type: 'Planet',
|
||||
img: 'https://images-assets.nasa.gov/image/PIA04866/PIA04866~medium.jpg',
|
||||
dist: '778M km',
|
||||
temp: '110K'
|
||||
},
|
||||
{
|
||||
id: 'orion',
|
||||
name: 'Orion Nebula',
|
||||
type: 'Nebula',
|
||||
img: 'https://images-assets.nasa.gov/image/PIA08653/PIA08653~medium.jpg',
|
||||
dist: '1,344 ly',
|
||||
temp: '10,000K'
|
||||
},
|
||||
{
|
||||
id: 'andromeda',
|
||||
name: 'Andromeda',
|
||||
type: 'Galaxy',
|
||||
img: 'https://images-assets.nasa.gov/image/PIA15416/PIA15416~medium.jpg',
|
||||
dist: '2.5M ly',
|
||||
temp: '2.7K'
|
||||
},
|
||||
{
|
||||
id: 'pillars',
|
||||
name: 'Pillars of Creation',
|
||||
type: 'Nebula',
|
||||
img: 'https://images-assets.nasa.gov/image/as11-40-5874/as11-40-5874~medium.jpg',
|
||||
dist: '6,500 ly',
|
||||
temp: '15K'
|
||||
}
|
||||
{ id: 'mars', name: 'Mars', type: 'Planet', img: 'https://images-assets.nasa.gov/image/PIA04591/PIA04591~medium.jpg', dist: '225M km' },
|
||||
{ id: 'jupiter', name: 'Jupiter', type: 'Planet', img: 'https://images-assets.nasa.gov/image/PIA04866/PIA04866~medium.jpg', dist: '778M km' },
|
||||
{ id: 'orion', name: 'Orion Nebula', type: 'Nebula', img: 'https://images-assets.nasa.gov/image/PIA08653/PIA08653~medium.jpg', dist: '1,344 ly' },
|
||||
{ id: 'andromeda', name: 'Andromeda', type: 'Galaxy', img: 'https://images-assets.nasa.gov/image/PIA15416/PIA15416~medium.jpg', dist: '2.5M ly' },
|
||||
{ id: 'pillars', name: 'Pillars of Creation', type: 'Nebula', img: 'https://images-assets.nasa.gov/image/as11-40-5874/as11-40-5874~medium.jpg', dist: '6,500 ly' }
|
||||
];
|
||||
|
||||
const ObservationPage = () => {
|
||||
@ -87,11 +108,7 @@ const ObservationPage = () => {
|
||||
const [selectedTarget, setSelectedTarget] = useState<any>(null);
|
||||
const [isFocusing, setIsFocusing] = useState(false);
|
||||
const [isSharpnessMax, setIsSharpnessMax] = useState(false);
|
||||
const [telemetry, setTelemetry] = useState({
|
||||
temp: -233,
|
||||
dist: 1.5,
|
||||
focal: 131,
|
||||
});
|
||||
const [telemetry, setTelemetry] = useState({ temp: -233, dist: 1.5, focal: 131 });
|
||||
|
||||
// Simulation States
|
||||
const [audienceCount, setAudienceCount] = useState(0);
|
||||
@ -99,14 +116,19 @@ const ObservationPage = () => {
|
||||
const [activeCelebrities, setActiveCelebrities] = useState<string[]>([]);
|
||||
const [chatMessages, setChatMessages] = useState<any[]>([]);
|
||||
const [showSimPanel, setShowSimPanel] = useState(false);
|
||||
|
||||
// Interaction State
|
||||
const [userQuery, setUserQuery] = useState('');
|
||||
const [isAsking, setIsAsking] = useState(false);
|
||||
const [lastResponse, setLastResponse] = useState<any>(null);
|
||||
|
||||
// Recording states
|
||||
const [isRecording, setIsRecording] = useState(false);
|
||||
const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);
|
||||
const [recordedChunks, setRecordedChunks] = useState<Blob[]>([]);
|
||||
const [videoUrl, setVideoUrl] = useState<string | null>(null);
|
||||
|
||||
const dispatch = useAppDispatch();
|
||||
const { gptResponse } = useAppSelector((state) => state.openAi);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(fetchSkyObjects({}));
|
||||
@ -115,11 +137,7 @@ const ObservationPage = () => {
|
||||
const startCamera = async () => {
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({
|
||||
video: {
|
||||
facingMode: 'environment',
|
||||
width: { ideal: 1920 },
|
||||
height: { ideal: 1080 }
|
||||
},
|
||||
video: { facingMode: 'environment', width: { ideal: 1920 }, height: { ideal: 1080 } },
|
||||
audio: true
|
||||
});
|
||||
if (videoRef.current) {
|
||||
@ -128,23 +146,17 @@ const ObservationPage = () => {
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Camera/Audio access denied:", err);
|
||||
alert("Camera and Microphone access are required for full simulation recording.");
|
||||
}
|
||||
};
|
||||
|
||||
const stopCamera = () => {
|
||||
if (videoRef.current && videoRef.current.srcObject) {
|
||||
const tracks = (videoRef.current.srcObject as MediaStream).getTracks();
|
||||
tracks.forEach(track => track.stop());
|
||||
(videoRef.current.srcObject as MediaStream).getTracks().forEach(track => track.stop());
|
||||
setIsCameraActive(false);
|
||||
if (isRecording) stopRecording();
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
return () => stopCamera();
|
||||
}, []);
|
||||
|
||||
// Audience Simulation Logic
|
||||
useEffect(() => {
|
||||
let interval: any;
|
||||
@ -152,28 +164,23 @@ const ObservationPage = () => {
|
||||
interval = setInterval(() => {
|
||||
setAudienceCount(prev => {
|
||||
const target = 1000000;
|
||||
if (prev < target) {
|
||||
return Math.min(prev + Math.floor(Math.random() * 5000) + 1000, target);
|
||||
}
|
||||
return target;
|
||||
return prev < target ? Math.min(prev + Math.floor(Math.random() * 8000) + 2000, target) : target;
|
||||
});
|
||||
|
||||
// Generate Chat Messages
|
||||
if (activeCelebrities.length > 0 && Math.random() > 0.7) {
|
||||
if (activeCelebrities.length > 0 && Math.random() > 0.85) {
|
||||
const randomCelebId = activeCelebrities[Math.floor(Math.random() * activeCelebrities.length)];
|
||||
const celeb = CELEBRITIES.find(c => c.id === randomCelebId);
|
||||
if (celeb) {
|
||||
const newMessage = {
|
||||
setChatMessages(prev => [{
|
||||
id: Date.now(),
|
||||
name: celeb.name,
|
||||
category: celeb.category,
|
||||
text: celeb.reaction,
|
||||
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
||||
};
|
||||
setChatMessages(prev => [newMessage, ...prev].slice(0, 10));
|
||||
}, ...prev].slice(0, 10));
|
||||
}
|
||||
}
|
||||
}, 2000);
|
||||
}, 1500);
|
||||
} else {
|
||||
setAudienceCount(0);
|
||||
setChatMessages([]);
|
||||
@ -181,30 +188,56 @@ const ObservationPage = () => {
|
||||
return () => clearInterval(interval);
|
||||
}, [isSimActive, activeCelebrities]);
|
||||
|
||||
const toggleCelebrity = (id: string) => {
|
||||
setActiveCelebrities(prev =>
|
||||
prev.includes(id) ? prev.filter(c => c !== id) : [...prev, id]
|
||||
);
|
||||
};
|
||||
const handleAskCelebrities = async () => {
|
||||
if (!userQuery.trim() || activeCelebrities.length === 0) return;
|
||||
|
||||
setIsAsking(true);
|
||||
const selectedNames = activeCelebrities.map(id => CELEBRITIES.find(c => c.id === id)?.name).join(', ');
|
||||
const celebContext = activeCelebrities.map(id => {
|
||||
const c = CELEBRITIES.find(x => x.id === id);
|
||||
return `${c?.name} (${c?.personality})`;
|
||||
}).join('; ');
|
||||
|
||||
const selectAllCelebrities = () => {
|
||||
setActiveCelebrities(CELEBRITIES.map(c => c.id));
|
||||
const prompt = `You are simulating a live conversation between the user and these celebrities: ${selectedNames}.
|
||||
User is observing ${selectedTarget ? selectedTarget.name : 'the cosmos'} through the James Webb Telescope.
|
||||
Celebrity Contexts: ${celebContext}.
|
||||
User asks: "${userQuery}".
|
||||
Respond as one or more of these celebrities, staying perfectly in character. Keep it short, real-time, and exciting.
|
||||
Format: [Name]: "Message"`;
|
||||
|
||||
try {
|
||||
const resultAction = await dispatch(askGpt(prompt));
|
||||
if (askGpt.fulfilled.match(resultAction)) {
|
||||
const response = resultAction.payload.data;
|
||||
const nameMatch = response.match(/\\\[(.*?)\\\]:\s*"(.*?)\\/);
|
||||
|
||||
const newMessage = {
|
||||
id: Date.now(),
|
||||
name: nameMatch ? nameMatch[1] : (activeCelebrities.length > 0 ? CELEBRITIES.find(c => c.id === activeCelebrities[0])?.name : 'AI'),
|
||||
category: 'Interactive Response',
|
||||
text: nameMatch ? nameMatch[2] : response,
|
||||
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
|
||||
isAi: true
|
||||
};
|
||||
|
||||
setChatMessages(prev => [newMessage, ...prev].slice(0, 15));
|
||||
setLastResponse(newMessage);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
} finally {
|
||||
setIsAsking(false);
|
||||
setUserQuery('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleZoom = (direction: 'in' | 'out') => {
|
||||
setZoom(prev => {
|
||||
if (direction === 'in') {
|
||||
return Math.min(prev * 2.5, 100000000000000);
|
||||
} else {
|
||||
return Math.max(prev / 2.5, 1);
|
||||
}
|
||||
});
|
||||
setZoom(prev => direction === 'in' ? Math.min(prev * 2.5, 1e14) : Math.max(prev / 2.5, 1));
|
||||
};
|
||||
|
||||
const selectTarget = (target: any) => {
|
||||
setSelectedTarget(target);
|
||||
setIsFocusing(true);
|
||||
|
||||
let currentZoom = zoom;
|
||||
const targetZoom = 1000000;
|
||||
const interval = setInterval(() => {
|
||||
@ -219,394 +252,225 @@ const ObservationPage = () => {
|
||||
}, 100);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setTelemetry(prev => ({
|
||||
temp: prev.temp + (Math.random() - 0.5),
|
||||
dist: 1.5 + (Math.random() - 0.5) * 0.01,
|
||||
focal: 131.4 + (Math.random() - 0.5),
|
||||
}));
|
||||
}, 2000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const getFilter = () => {
|
||||
let base = 'none';
|
||||
switch (mode) {
|
||||
case 'ir': base = 'contrast(1.2) brightness(1.1) hue-rotate(180deg) saturate(1.5)'; break;
|
||||
case 'deep': base = 'contrast(1.5) brightness(0.8) saturate(0.5) blur(0.5px)'; break;
|
||||
default: base = 'none';
|
||||
}
|
||||
|
||||
if (isSharpnessMax) {
|
||||
base += ' contrast(1.4) brightness(1.1) saturate(1.2) drop-shadow(0 0 1px white)';
|
||||
}
|
||||
|
||||
return base;
|
||||
};
|
||||
|
||||
// Recording Logic
|
||||
const startRecording = () => {
|
||||
if (!videoRef.current || !videoRef.current.srcObject) return;
|
||||
const stream = videoRef.current.srcObject as MediaStream;
|
||||
const options = { mimeType: 'video/webm;codecs=vp8,opus' };
|
||||
if (!MediaRecorder.isTypeSupported(options.mimeType)) options.mimeType = 'video/webm';
|
||||
const recorder = new MediaRecorder(stream, options);
|
||||
const recorder = new MediaRecorder(stream, MediaRecorder.isTypeSupported(options.mimeType) ? options : { mimeType: 'video/webm' });
|
||||
const chunks: Blob[] = [];
|
||||
recorder.ondataavailable = (event) => { if (event.data.size > 0) chunks.push(event.data); };
|
||||
recorder.onstop = () => {
|
||||
const blob = new Blob(chunks, { type: 'video/webm' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
setVideoUrl(url);
|
||||
};
|
||||
recorder.ondataavailable = (e) => chunks.push(e.data);
|
||||
recorder.onstop = () => setVideoUrl(URL.createObjectURL(new Blob(chunks, { type: 'video/webm' })));
|
||||
recorder.start();
|
||||
setIsRecording(true);
|
||||
setMediaRecorder(recorder);
|
||||
setVideoUrl(null);
|
||||
};
|
||||
|
||||
const stopRecording = () => {
|
||||
if (mediaRecorder && mediaRecorder.state !== 'inactive') {
|
||||
mediaRecorder.stop();
|
||||
setIsRecording(false);
|
||||
}
|
||||
};
|
||||
|
||||
const stopRecording = () => { mediaRecorder?.stop(); setIsRecording(false); };
|
||||
|
||||
const downloadVideo = () => {
|
||||
if (videoUrl) {
|
||||
const a = document.createElement('a');
|
||||
a.style.display = 'none';
|
||||
a.href = videoUrl;
|
||||
a.download = `JWST-CELEB-REC-${new Date().getTime()}.webm`;
|
||||
document.body.appendChild(a);
|
||||
a.download = `JWST-INTERACTIVE-REC-${Date.now()}.webm`;
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(videoUrl);
|
||||
setVideoUrl(null);
|
||||
}
|
||||
};
|
||||
|
||||
const formatZoom = (z: number) => {
|
||||
if (z >= 1000000000000) return `${(z / 1000000000000).toFixed(1)}T`;
|
||||
if (z >= 1000000000) return `${(z / 1000000000).toFixed(1)}B`;
|
||||
if (z >= 1000000) return `${(z / 1000000).toFixed(1)}M`;
|
||||
if (z >= 1000) return `${(z / 1000).toFixed(1)}K`;
|
||||
if (z >= 1e12) return `${(z / 1e12).toFixed(1)}T`;
|
||||
if (z >= 1e9) return `${(z / 1e9).toFixed(1)}B`;
|
||||
if (z >= 1e6) return `${(z / 1e6).toFixed(1)}M`;
|
||||
return `${z.toFixed(0)}x`;
|
||||
};
|
||||
|
||||
const isDeepZoom = zoom > 5000;
|
||||
|
||||
return (
|
||||
<div className="relative h-screen w-full bg-black overflow-hidden flex flex-col font-mono text-[#00F2FF]">
|
||||
<Head>
|
||||
<title>JWST | Global Observation Live</title>
|
||||
</Head>
|
||||
<Head><title>JWST | Interactive Global Live</title></Head>
|
||||
|
||||
{/* Main Viewport */}
|
||||
{/* Main Viewport */}
|
||||
<div className="absolute inset-0 z-0 bg-gray-950 overflow-hidden">
|
||||
{!isCameraActive && (
|
||||
<div className="flex flex-col items-center justify-center h-full space-y-6 z-10 relative">
|
||||
<div className="w-32 h-32 border-2 border-[#E3B341] rounded-full flex items-center justify-center animate-pulse">
|
||||
<BaseIcon path={mdiTelescope} size={64} className="text-[#E3B341]" />
|
||||
</div>
|
||||
<p className="text-[#E3B341] uppercase tracking-[0.4em] font-bold text-xl">Systems Offline</p>
|
||||
<button
|
||||
onClick={startCamera}
|
||||
className="bg-[#E3B341] text-black px-12 py-4 font-bold uppercase tracking-widest hover:bg-white transition-all transform hover:scale-105"
|
||||
>
|
||||
Initialize Deployment
|
||||
</button>
|
||||
<p className="text-[#E3B341] uppercase tracking-[0.4em] font-bold text-xl text-center">Telescope Standby</p>
|
||||
<button onClick={startCamera} className="bg-[#E3B341] text-black px-12 py-4 font-bold uppercase tracking-widest hover:bg-white transition-all transform hover:scale-105">Deploy Systems</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Live Camera Feed */}
|
||||
<video
|
||||
ref={videoRef}
|
||||
autoPlay
|
||||
playsInline
|
||||
muted
|
||||
className={`absolute inset-0 w-full h-full object-cover transition-all duration-1000 ${isCameraActive && (!isDeepZoom || !selectedTarget) ? 'opacity-100' : 'opacity-0'}`}
|
||||
style={{
|
||||
filter: getFilter(),
|
||||
transform: `scale(${1 + Math.log10(zoom)})`,
|
||||
transition: 'transform 0.5s ease-out, opacity 1.5s ease-in-out',
|
||||
imageRendering: isSharpnessMax ? 'crisp-edges' : 'auto'
|
||||
}}
|
||||
<video ref={videoRef} autoPlay playsInline muted className={`absolute inset-0 w-full h-full object-cover transition-all duration-1000 ${isCameraActive && (zoom <= 5000 || !selectedTarget) ? 'opacity-100' : 'opacity-0'}`}
|
||||
style={{ filter: (isSharpnessMax ? 'contrast(1.4) brightness(1.1) saturate(1.2)' : 'none') + (mode === 'ir' ? ' hue-rotate(180deg) saturate(1.5)' : mode === 'deep' ? ' contrast(1.5) brightness(0.8)' : ''), transform: `scale(${1 + Math.log10(zoom)})`, imageRendering: isSharpnessMax ? 'crisp-edges' : 'auto' }}
|
||||
/>
|
||||
|
||||
{/* Deep Space Layer */}
|
||||
{selectedTarget && (
|
||||
<div
|
||||
className={`absolute inset-0 w-full h-full bg-cover bg-center transition-opacity duration-1000 ${isDeepZoom ? 'opacity-100' : 'opacity-0'}`}
|
||||
style={{
|
||||
backgroundImage: `url(${selectedTarget.img})`,
|
||||
transform: `scale(${1 + (Math.log10(zoom) - 3) / 20})`,
|
||||
filter: getFilter(),
|
||||
imageRendering: isSharpnessMax ? 'crisp-edges' : 'auto'
|
||||
}}
|
||||
<div className={`absolute inset-0 w-full h-full bg-cover bg-center transition-opacity duration-1000 ${zoom > 5000 ? 'opacity-100' : 'opacity-0'}`}
|
||||
style={{ backgroundImage: `url(${selectedTarget.img})`, transform: `scale(${1 + (Math.log10(zoom) - 3) / 20})`, filter: isSharpnessMax ? 'contrast(1.4) brightness(1.1) saturate(1.2)' : 'none', imageRendering: isSharpnessMax ? 'crisp-edges' : 'auto' }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Audience Visual Simulation Overlay */}
|
||||
{isSimActive && audienceCount > 1000 && (
|
||||
<div className="absolute inset-0 z-10 pointer-events-none overflow-hidden opacity-30">
|
||||
{/* Heatmap/Crowd Particles Effect */}
|
||||
<div className="absolute bottom-0 w-full h-1/4 bg-gradient-to-t from-[#E3B341]/20 to-transparent"></div>
|
||||
{[...Array(20)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute bg-[#00F2FF] rounded-full blur-[2px] animate-pulse"
|
||||
style={{
|
||||
width: Math.random() * 4 + 2,
|
||||
height: Math.random() * 4 + 2,
|
||||
left: `${Math.random() * 100}%`,
|
||||
bottom: `${Math.random() * 20}%`,
|
||||
opacity: Math.random(),
|
||||
animationDelay: `${Math.random() * 5}s`
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
{/* 1 Million People Visual Simulation */}
|
||||
{isSimActive && audienceCount > 0 && (
|
||||
<div className="absolute inset-0 z-10 pointer-events-none opacity-40">
|
||||
<div className="absolute bottom-0 w-full h-1/2 bg-gradient-to-t from-[#E3B341]/30 to-transparent"></div>
|
||||
{[...Array(50)].map((_, i) => (
|
||||
<div key={i} className="absolute bg-[#E3B341] rounded-full blur-[3px] animate-pulse"
|
||||
style={{ width: Math.random() * 6 + 2, height: Math.random() * 6 + 2, left: `${Math.random() * 100}%`, bottom: `${Math.random() * 40}%`, opacity: Math.random(), animationDelay: `${Math.random() * 5}s` }}
|
||||
/>
|
||||
))}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-24 bg-[#00F2FF]/10 blur-3xl"></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Loading Overlay */}
|
||||
{isFocusing && (
|
||||
<div className="absolute inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
<div className="w-16 h-16 border-4 border-[#00F2FF] border-t-transparent rounded-full animate-spin"></div>
|
||||
<div className="text-[#00F2FF] uppercase tracking-[0.3em] font-bold animate-pulse">Adjusting Focal Plane...</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Celebrity Visible Avatars Overlay */}
|
||||
{isSimActive && activeCelebrities.length > 0 && (
|
||||
<div className="absolute bottom-32 left-1/2 -translate-x-1/2 flex -space-x-4 z-30 pointer-events-none">
|
||||
{activeCelebrities.map((id, index) => {
|
||||
const celeb = CELEBRITIES.find(c => c.id === id);
|
||||
const isSpeaking = lastResponse?.name === celeb?.name;
|
||||
return (
|
||||
<div key={id} className={`relative transition-all duration-500 transform ${isSpeaking ? 'scale-125 z-50 -translate-y-4' : 'scale-100 opacity-80'}`} style={{ transitionDelay: `${index * 100}ms` }}>
|
||||
<div className={`w-20 h-20 rounded-full border-4 overflow-hidden shadow-2xl ${isSpeaking ? 'border-[#E3B341] ring-4 ring-[#E3B341]/40' : 'border-white/20'}`}>
|
||||
<img src={celeb?.img} alt={celeb?.name} className="w-full h-full object-cover" />
|
||||
</div>
|
||||
{isSpeaking && (
|
||||
<div className="absolute -top-12 left-1/2 -translate-x-1/2 bg-[#E3B341] text-black text-[10px] font-bold px-3 py-1 rounded-full whitespace-nowrap animate-bounce">
|
||||
{celeb?.name} is speaking!
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* UI Controls & Telemetry */}
|
||||
{/* UI Controls */}
|
||||
{isCameraActive && (
|
||||
<div className="absolute inset-0 z-20 p-4 flex flex-col justify-between pointer-events-none">
|
||||
{/* Top Bar */}
|
||||
<div className="flex justify-between items-start pointer-events-auto">
|
||||
<div className="bg-black/80 border-l-4 border-[#E3B341] p-4 backdrop-blur-lg min-w-[240px]">
|
||||
<div className="text-[10px] text-gray-400 uppercase tracking-tighter">Global Observation Stream</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className={`w-2 h-2 rounded-full ${isRecording ? 'bg-red-500 animate-pulse' : 'bg-green-500'}`}></div>
|
||||
<div className="font-bold text-[#E3B341] tracking-widest uppercase text-xs">
|
||||
{isRecording ? 'A/V REC ACTIVE' : (isFocusing ? 'Acquiring Target' : 'LIVE TRANSMISSION')}
|
||||
<div className="bg-black/90 border-l-4 border-[#E3B341] p-4 backdrop-blur-xl min-w-[280px] shadow-[0_0_20px_rgba(227,179,65,0.2)]">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="text-[9px] text-gray-400 uppercase tracking-widest">Global Live System</div>
|
||||
<div className="text-[9px] text-[#00F2FF] font-bold">STABLE</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className={`w-3 h-3 rounded-full ${isRecording ? 'bg-red-500 animate-pulse' : 'bg-green-500'}`}></div>
|
||||
<div className="font-bold text-[#E3B341] tracking-widest uppercase text-sm">
|
||||
{isRecording ? 'A/V REC ACTIVE' : 'Deep Space Feed'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isSimActive && (
|
||||
<div className="mt-2 flex items-center space-x-2 bg-white/5 p-1 px-2 rounded">
|
||||
<BaseIcon path={mdiAccountGroup} size={14} className="text-[#00F2FF]" />
|
||||
<span className="text-white text-xs font-bold">{audienceCount.toLocaleString()} <span className="text-[10px] text-gray-400 font-normal">WATCHING</span></span>
|
||||
<div className="mt-3 flex items-center justify-between bg-white/5 p-2 rounded-lg border border-white/10">
|
||||
<div className="flex items-center space-x-2">
|
||||
<BaseIcon path={mdiAccountGroup} size={16} className="text-[#00F2FF]" />
|
||||
<span className="text-white text-sm font-black tabular-nums">{audienceCount.toLocaleString()}</span>
|
||||
</div>
|
||||
<span className="text-[10px] text-gray-400 uppercase font-bold tracking-tighter">Live Audience</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-3 grid grid-cols-2 gap-x-4 text-[9px]">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-gray-500">BUS TEMP</span>
|
||||
<span className="text-white">{(selectedTarget && isDeepZoom ? 6.5 : telemetry.temp).toFixed(1)}K</span>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-gray-500">MAGNIFICATION</span>
|
||||
<span className="text-[#00F2FF] font-bold">{formatZoom(zoom)}</span>
|
||||
</div>
|
||||
<div className="mt-3 grid grid-cols-2 gap-4 border-t border-white/10 pt-3">
|
||||
<div className="flex flex-col"><span className="text-[8px] text-gray-500 uppercase">Magnification</span><span className="text-white font-bold">{formatZoom(zoom)}</span></div>
|
||||
<div className="flex flex-col"><span className="text-[8px] text-gray-500 uppercase">Target</span><span className="text-[#00F2FF] font-bold truncate">{selectedTarget?.name || 'Scanning'}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-2">
|
||||
{/* Advanced Sim Control */}
|
||||
<button
|
||||
onClick={() => setShowSimPanel(!showSimPanel)}
|
||||
className={`p-3 bg-black/80 border transition-all ${isSimActive ? 'border-[#E3B341] text-[#E3B341]' : 'border-white/20 text-white opacity-60'}`}
|
||||
title="Advanced Simulations"
|
||||
>
|
||||
<BaseIcon path={mdiStarCircle} size={20} />
|
||||
</button>
|
||||
|
||||
{/* Recording System */}
|
||||
<div className="flex space-x-1 bg-black/60 p-1 border border-white/10">
|
||||
{!isRecording ? (
|
||||
<button
|
||||
onClick={startRecording}
|
||||
className="p-3 bg-black/80 border border-white/20 hover:bg-red-600 transition-all text-white"
|
||||
>
|
||||
<BaseIcon path={mdiRecord} size={20} className="text-red-500" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={stopRecording}
|
||||
className="p-3 bg-red-600 border border-white/20 transition-all text-white animate-pulse"
|
||||
>
|
||||
<BaseIcon path={mdiStop} size={20} />
|
||||
</button>
|
||||
)}
|
||||
{videoUrl && (
|
||||
<button
|
||||
onClick={downloadVideo}
|
||||
className="p-3 bg-blue-600 border border-white/20 transition-all text-white"
|
||||
>
|
||||
<BaseIcon path={mdiDownload} size={20} />
|
||||
</button>
|
||||
)}
|
||||
<div className="flex space-x-3">
|
||||
<button onClick={() => setShowSimPanel(!showSimPanel)} className={`p-4 bg-black/90 border-2 transition-all rounded-xl ${showSimPanel ? 'border-[#E3B341] text-[#E3B341] shadow-[0_0_15px_rgba(227,179,65,0.4)]' : 'border-white/20 text-white'}`}><BaseIcon path={mdiStarCircle} size={24} /></button>
|
||||
<div className="flex space-x-1 bg-black/80 p-1 border-2 border-white/10 rounded-xl">
|
||||
<button onClick={isRecording ? stopRecording : startRecording} className={`p-4 rounded-lg transition-all ${isRecording ? 'bg-red-600 animate-pulse text-white' : 'bg-white/5 text-red-500 hover:bg-white/10'}`}><BaseIcon path={isRecording ? mdiStop : mdiRecord} size={24} /></button>
|
||||
{videoUrl && <button onClick={downloadVideo} className="p-4 bg-blue-600 rounded-lg text-white"><BaseIcon path={mdiDownload} size={24} /></button>}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => setIsSharpnessMax(!isSharpnessMax)}
|
||||
className={`p-3 bg-black/80 border transition-all ${isSharpnessMax ? 'border-[#00F2FF] text-[#00F2FF]' : 'border-white/20 text-white opacity-60'}`}
|
||||
>
|
||||
<BaseIcon path={mdiAutoFix} size={20} />
|
||||
</button>
|
||||
<button
|
||||
onClick={stopCamera}
|
||||
className="p-3 bg-black/80 border border-red-500/40 hover:bg-red-500/40 transition-all"
|
||||
>
|
||||
<BaseIcon path={mdiClose} size={20} className="text-white" />
|
||||
</button>
|
||||
<button onClick={() => setIsSharpnessMax(!isSharpnessMax)} className={`p-4 bg-black/90 border-2 transition-all rounded-xl ${isSharpnessMax ? 'border-[#00F2FF] text-[#00F2FF]' : 'border-white/20 text-white'}`}><BaseIcon path={mdiAutoFix} size={24} /></button>
|
||||
<button onClick={stopCamera} className="p-4 bg-black/90 border-2 border-red-500/40 rounded-xl hover:bg-red-500/60"><BaseIcon path={mdiClose} size={24} className="text-white" /></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Advanced Simulation Panel */}
|
||||
{showSimPanel && (
|
||||
<div className="absolute top-20 right-4 w-72 bg-black/95 border border-[#E3B341] p-4 backdrop-blur-xl pointer-events-auto z-50">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-[#E3B341] font-bold uppercase text-xs tracking-widest">Audience Simulation</h3>
|
||||
<button onClick={() => setShowSimPanel(false)}><BaseIcon path={mdiClose} size={16} /></button>
|
||||
<div className="absolute top-24 right-4 w-80 bg-black/95 border-2 border-[#E3B341] p-6 backdrop-blur-3xl pointer-events-auto z-50 rounded-2xl shadow-2xl">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h3 className="text-[#E3B341] font-black uppercase text-xs tracking-[0.3em]">AI Simulation Panel</h3>
|
||||
<button onClick={() => setShowSimPanel(false)}><BaseIcon path={mdiClose} size={20} /></button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between bg-white/5 p-2 rounded">
|
||||
<span className="text-[10px] uppercase">Live Audience (1M max)</span>
|
||||
<button
|
||||
onClick={() => setIsSimActive(!isSimActive)}
|
||||
className={`px-3 py-1 text-[9px] uppercase font-bold rounded ${isSimActive ? 'bg-red-600 text-white' : 'bg-[#00F2FF] text-black'}`}
|
||||
>
|
||||
{isSimActive ? 'Disable' : 'Enable'}
|
||||
<div className="space-y-6">
|
||||
<div className="bg-white/5 p-4 rounded-xl border border-white/10">
|
||||
<button onClick={() => setIsSimActive(!isSimActive)} className={`w-full py-2 text-xs uppercase font-black rounded-lg transition-all ${isSimActive ? 'bg-red-600 text-white' : 'bg-[#00F2FF] text-black'}`}>
|
||||
{isSimActive ? 'Disable Global Audience' : 'Enable Global Audience'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-white/10 pt-4">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<span className="text-[10px] uppercase text-gray-400">Personalities (Famous Artists)</span>
|
||||
<button onClick={selectAllCelebrities} className="text-[8px] text-[#00F2FF] uppercase underline">Select All</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2 max-h-40 overflow-y-auto pr-2 custom-scrollbar">
|
||||
<div className="border-t border-white/10 pt-6">
|
||||
<span className="text-[10px] uppercase text-gray-500 font-bold block mb-3">Visible Characters</span>
|
||||
<div className="grid grid-cols-2 gap-2 max-h-48 overflow-y-auto pr-2 custom-scrollbar">
|
||||
{CELEBRITIES.map(celeb => (
|
||||
<button
|
||||
key={celeb.id}
|
||||
onClick={() => toggleCelebrity(celeb.id)}
|
||||
className={`p-1.5 text-left text-[9px] rounded transition-all border ${activeCelebrities.includes(celeb.id) ? 'bg-[#E3B341] text-black border-[#E3B341]' : 'bg-white/5 text-white border-white/10'}`}
|
||||
>
|
||||
{celeb.name}
|
||||
<button key={celeb.id} onClick={() => {
|
||||
setActiveCelebrities(prev => prev.includes(celeb.id) ? prev.filter(c => c !== celeb.id) : [...prev, celeb.id]);
|
||||
}} className={`flex items-center space-x-2 p-2 rounded-lg transition-all border ${activeCelebrities.includes(celeb.id) ? 'bg-[#E3B341] border-[#E3B341] text-black' : 'bg-white/5 border-white/10 text-white opacity-70 hover:opacity-100'}`}>
|
||||
<img src={celeb.img} className="w-6 h-6 rounded-full object-cover" />
|
||||
<span className="text-[9px] font-bold truncate">{celeb.name}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{isSimActive && activeCelebrities.length > 0 && (
|
||||
<div className="border-t border-white/10 pt-6">
|
||||
<div className="relative">
|
||||
<input type="text" value={userQuery} onChange={(e) => setUserQuery(e.target.value)} placeholder="Ask celebrities something..." className="w-full bg-white/5 border border-white/20 rounded-lg p-3 text-xs text-white focus:outline-none focus:border-[#00F2FF]" onKeyDown={(e) => e.key === 'Enter' && handleAskCelebrities()} />
|
||||
<button onClick={handleAskCelebrities} disabled={isAsking} className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-[#00F2FF]"><BaseIcon path={isAsking ? mdiChatProcessingOutline : mdiSend} size={18} className={isAsking ? 'animate-spin' : ''} /></button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Simulation Chat / Interaction Overlay */}
|
||||
{isSimActive && chatMessages.length > 0 && (
|
||||
<div className="absolute left-4 top-1/2 -translate-y-1/2 w-64 flex flex-col space-y-2 pointer-events-none">
|
||||
<div className="absolute left-4 top-1/2 -translate-y-1/2 w-80 flex flex-col space-y-3 pointer-events-none max-h-[60vh] overflow-hidden">
|
||||
{chatMessages.map(msg => (
|
||||
<div key={msg.id} className="bg-black/60 backdrop-blur-md p-2 border-l-2 border-[#E3B341] animate-fade-in-right">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-[#E3B341] font-bold text-[9px] uppercase">{msg.name}</span>
|
||||
<span className="text-[8px] text-gray-500">{msg.category}</span>
|
||||
<div key={msg.id} className={`bg-black/80 backdrop-blur-2xl p-4 border-l-4 rounded-r-2xl animate-fade-in-right shadow-2xl ${msg.isAi ? 'border-[#00F2FF]' : 'border-[#E3B341]'}`}>
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className={`${msg.isAi ? 'text-[#00F2FF]' : 'text-[#E3B341]'} font-black text-[10px] uppercase tracking-widest`}>{msg.name}</span>
|
||||
</div>
|
||||
<p className="text-white text-[10px] leading-tight mt-1 italic">"{msg.text}"</p>
|
||||
<p className="text-white text-xs leading-relaxed">"{msg.text}"</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Zoom Controls */}
|
||||
<div className="absolute right-4 top-1/2 -translate-y-1/2 flex flex-col space-y-4 pointer-events-auto items-center">
|
||||
<button
|
||||
onClick={() => handleZoom('in')}
|
||||
className="w-12 h-12 bg-black/80 border border-[#00F2FF] flex items-center justify-center hover:bg-[#00F2FF] hover:text-black transition-all rounded-full shadow-[0_0_15px_rgba(0,242,255,0.3)]"
|
||||
>
|
||||
<BaseIcon path={mdiMagnifyPlusOutline} size={24} />
|
||||
</button>
|
||||
<div className="h-40 w-1 bg-gray-800 relative rounded-full overflow-hidden">
|
||||
<div
|
||||
className="absolute bottom-0 left-0 w-full bg-[#00F2FF] transition-all duration-300"
|
||||
style={{ height: `${(Math.log10(zoom) / 14) * 100}%` }}
|
||||
></div>
|
||||
<div className="absolute right-8 top-1/2 -translate-y-1/2 flex flex-col space-y-6 pointer-events-auto items-center">
|
||||
<button onClick={() => handleZoom('in')} className="w-16 h-16 bg-black/90 border-2 border-[#00F2FF] flex items-center justify-center hover:bg-[#00F2FF] hover:text-black transition-all rounded-2xl shadow-[0_0_20px_rgba(0,242,255,0.4)]"><BaseIcon path={mdiMagnifyPlusOutline} size={32} /></button>
|
||||
<div className="h-56 w-2 bg-gray-900/80 relative rounded-full overflow-hidden border border-white/10">
|
||||
<div className="absolute bottom-0 left-0 w-full bg-[#00F2FF] transition-all duration-300" style={{ height: `${(Math.log10(zoom) / 14) * 100}%` }}></div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleZoom('out')}
|
||||
className="w-12 h-12 bg-black/80 border border-[#00F2FF] flex items-center justify-center hover:bg-[#00F2FF] hover:text-black transition-all rounded-full"
|
||||
>
|
||||
<BaseIcon path={mdiMagnifyMinusOutline} size={24} />
|
||||
</button>
|
||||
<button onClick={() => handleZoom('out')} className="w-16 h-16 bg-black/90 border-2 border-[#00F2FF] flex items-center justify-center hover:bg-[#00F2FF] hover:text-black transition-all rounded-2xl"><BaseIcon path={mdiMagnifyMinusOutline} size={32} /></button>
|
||||
</div>
|
||||
|
||||
{/* Bottom Area: Controls */}
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
{/* Target Selector */}
|
||||
<div className="flex flex-wrap justify-center gap-2 pointer-events-auto bg-black/60 p-3 backdrop-blur-md rounded-xl border border-white/10 max-w-lg">
|
||||
<div className="flex flex-col items-center space-y-6">
|
||||
<div className="flex flex-wrap justify-center gap-3 pointer-events-auto bg-black/80 p-4 backdrop-blur-2xl rounded-2xl border-2 border-white/10 max-w-2xl shadow-2xl">
|
||||
{PRESET_TARGETS.map(target => (
|
||||
<button
|
||||
key={target.id}
|
||||
onClick={() => selectTarget(target)}
|
||||
className={`px-3 py-1.5 text-[9px] uppercase tracking-[0.2em] border transition-all ${selectedTarget?.id === target.id ? 'bg-[#E3B341] text-black border-[#E3B341]' : 'bg-black/60 text-white border-white/20 hover:border-[#E3B341]'}`}
|
||||
>
|
||||
{target.name}
|
||||
</button>
|
||||
<button key={target.id} onClick={() => selectTarget(target)} className={`px-4 py-2 text-[10px] font-black uppercase tracking-[0.25em] border-2 transition-all rounded-xl ${selectedTarget?.id === target.id ? 'bg-[#E3B341] text-black border-[#E3B341] shadow-[0_0_15px_rgba(227,179,65,0.5)]' : 'bg-black/60 text-white border-white/10 hover:border-[#E3B341]'}`}>{target.name}</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Sensor Modes */}
|
||||
<div className="flex justify-center space-x-6 pointer-events-auto pb-4">
|
||||
{[
|
||||
{ id: 'normal', label: 'VIS', icon: mdiWeatherNight, color: 'text-white' },
|
||||
{ id: 'ir', label: 'NIRSpec', icon: mdiFlare, color: 'text-[#E3B341]' },
|
||||
{ id: 'deep', label: 'MIRI', icon: mdiOrbitVariant, color: 'text-purple-400' }
|
||||
].map(btn => (
|
||||
<button
|
||||
key={btn.id}
|
||||
onClick={() => setMode(btn.id as any)}
|
||||
className={`flex flex-col items-center p-2 w-16 transition-all ${mode === btn.id ? 'scale-110' : 'opacity-40 hover:opacity-100'}`}
|
||||
>
|
||||
<div className={`p-2 rounded-full border ${mode === btn.id ? 'border-[#00F2FF] bg-[#00F2FF]/10' : 'border-white/10'}`}>
|
||||
<BaseIcon path={btn.icon} size={20} className={btn.color} />
|
||||
</div>
|
||||
<div className={`text-[8px] mt-1 font-bold tracking-tighter ${btn.color}`}>{btn.label}</div>
|
||||
<div className="flex justify-center space-x-8 pointer-events-auto bg-black/60 p-2 rounded-full border border-white/5 mb-4">
|
||||
{[ { id: 'normal', label: 'VIS', icon: mdiWeatherNight }, { id: 'ir', label: 'NIRSpec', icon: mdiFlare }, { id: 'deep', label: 'MIRI', icon: mdiOrbitVariant } ].map(btn => (
|
||||
<button key={btn.id} onClick={() => setMode(btn.id as any)} className={`group flex flex-col items-center p-3 w-20 transition-all ${mode === btn.id ? 'scale-110' : 'opacity-40 hover:opacity-100'}`}>
|
||||
<div className={`p-3 rounded-2xl border-2 transition-all ${mode === btn.id ? 'border-[#00F2FF] bg-[#00F2FF]/20' : 'border-white/10'}`}><BaseIcon path={btn.icon} size={24} /></div>
|
||||
<div className="text-[9px] mt-2 font-black tracking-tighter uppercase">{btn.label}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Futuristic Scanline */}
|
||||
<div className="absolute inset-0 pointer-events-none z-40 bg-scanline opacity-10"></div>
|
||||
|
||||
<div className="absolute inset-0 pointer-events-none z-40 bg-scanline opacity-[0.03]"></div>
|
||||
<style jsx global>{`
|
||||
@keyframes fade-in-right {
|
||||
from { opacity: 0; transform: translateX(-20px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
.animate-fade-in-right {
|
||||
animation: fade-in-right 0.5s ease-out forwards;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #E3B341;
|
||||
border-radius: 10px;
|
||||
}
|
||||
@keyframes fade-in-right { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
|
||||
.animate-fade-in-right { animation: fade-in-right 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
|
||||
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb { background: #E3B341; border-radius: 10px; }
|
||||
.bg-scanline { background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.5) 51%); background-size: 100% 4px; }
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
ObservationPage.getLayout = function getLayout(page: ReactElement) {
|
||||
return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
|
||||
};
|
||||
|
||||
ObservationPage.getLayout = function getLayout(page: ReactElement) { return <LayoutAuthenticated>{page}</LayoutAuthenticated>; };
|
||||
export default ObservationPage;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user