INTEGRE DESENVOLVA O Telescópio James webb, COMPLE

frontend/src/components/NavBarItem.tsx

@@ -1,6 +1,5 @@
-import React, {useEffect, useRef} from 'react'
+import React, {useEffect, useRef, useState} from 'react'
 import Link from 'next/link'
-import { useState } from 'react'
 import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
 import BaseDivider from './BaseDivider'
 import BaseIcon from './BaseIcon'
@@ -129,4 +128,4 @@ export default function NavBarItem({ item }: Props) {
   }
 
   return <div className={componentClass} ref={excludedRef}>{NavBarItemComponentContents}</div>
-}
+}

frontend/src/layouts/Authenticated.tsx

@@ -1,5 +1,4 @@
-import React, { ReactNode, useEffect } from 'react'
-import { useState } from 'react'
+import React, { ReactNode, useEffect, useState } from 'react'
 import jwt from 'jsonwebtoken';
 import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
 import menuAside from '../menuAside'
@@ -126,4 +125,4 @@ export default function LayoutAuthenticated({
       </div>
     </div>
   )
-}
+}

frontend/src/menuAside.ts

@@ -7,7 +7,11 @@ const menuAside: MenuAsideItem[] = [
     icon: icon.mdiViewDashboardOutline,
     label: 'Dashboard',
   },
-  
+  {
+    href: '/observation',
+    icon: icon.mdiCamera,
+    label: 'Live Observation',
+  },
   {
     href: '/users/users-list',
     label: 'Users',
@@ -112,4 +116,4 @@ const menuAside: MenuAsideItem[] = [
   },
 ]
 
-export default menuAside
+export default menuAside

frontend/src/pages/index.tsx

@@ -1,161 +1,90 @@
 
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import type { ReactElement } from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
 import BaseButton from '../components/BaseButton';
-import CardBox from '../components/CardBox';
 import SectionFullScreen from '../components/SectionFullScreen';
 import LayoutGuest from '../layouts/Guest';
-import BaseDivider from '../components/BaseDivider';
-import BaseButtons from '../components/BaseButtons';
 import { getPageTitle } from '../config';
-import { useAppSelector } from '../stores/hooks';
-import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
-import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
-
+import { mdiTelescope, mdiCamera, mdiDatabaseSearch } from '@mdi/js';
+import BaseIcon from '../components/BaseIcon';
 
 export default function Starter() {
-    const [illustrationImage, setIllustrationImage] = useState({
-        src: undefined,
-        photographer: undefined,
-        photographer_url: undefined,
-    })
-    const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
-    const [contentType, setContentType] = useState('image');
-    const [contentPosition, setContentPosition] = useState('right');
-    const textColor = useAppSelector((state) => state.style.linkColor);
-
-    const title = 'Live Sky Viewer PWA'
-
-    // Fetch Pexels image/video
-    useEffect(() => {
-        async function fetchData() {
-            const image = await getPexelsImage();
-            const video = await getPexelsVideo();
-            setIllustrationImage(image);
-            setIllustrationVideo(video);
-        }
-        fetchData();
-    }, []);
-
-    const imageBlock = (image) => (
-        <div
-            className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
-            style={{
-                backgroundImage: `${
-                    image
-                        ? `url(${image?.src?.original})`
-                        : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                }`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'left center',
-                backgroundRepeat: 'no-repeat',
-            }}
-        >
-            <div className='flex justify-center w-full bg-blue-300/20'>
-                <a
-                    className='text-[8px]'
-                    href={image?.photographer_url}
-                    target='_blank'
-                    rel='noreferrer'
-                >
-                    Photo by {image?.photographer} on Pexels
-                </a>
-            </div>
-        </div>
-    );
-
-    const videoBlock = (video) => {
-        if (video?.video_files?.length > 0) {
-            return (
-                <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
-                    <video
-                        className='absolute top-0 left-0 w-full h-full object-cover'
-                        autoPlay
-                        loop
-                        muted
-                    >
-                        <source src={video?.video_files[0]?.link} type='video/mp4'/>
-                        Your browser does not support the video tag.
-                    </video>
-                    <div className='flex justify-center w-full bg-blue-300/20 z-10'>
-                        <a
-                            className='text-[8px]'
-                            href={video?.user?.url}
-                            target='_blank'
-                            rel='noreferrer'
-                        >
-                            Video by {video.user.name} on Pexels
-                        </a>
-                    </div>
-                </div>)
-        }
-    };
+  const title = 'JWST Live Sky Explorer'
 
   return (
-      <div
-          style={
-              contentPosition === 'background'
-                  ? {
-                      backgroundImage: `${
-                          illustrationImage
-                              ? `url(${illustrationImage.src?.original})`
-                              : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                      }`,
-                      backgroundSize: 'cover',
-                      backgroundPosition: 'left center',
-                      backgroundRepeat: 'no-repeat',
-                  }
-                  : {}
-          }
-      >
+    <div className="bg-[#0B0D17] text-white min-h-screen font-sans selection:bg-[#E3B341] selection:text-black">
       <Head>
-        <title>{getPageTitle('Starter Page')}</title>
+        <title>{getPageTitle('JWST Explorer')}</title>
       </Head>
 
-      <SectionFullScreen bg='violet'>
-      <div
-          className={`flex ${
-              contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
-          } min-h-screen w-full`}
-      >
-          {contentType === 'image' && contentPosition !== 'background'
-              ? imageBlock(illustrationImage)
-              : null}
-          {contentType === 'video' && contentPosition !== 'background'
-              ? videoBlock(illustrationVideo)
-              : null}
-          <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
-        <CardBox className='w-full md:w-3/5 lg:w-2/3'>
-            <CardBoxComponentTitle title="Welcome to your Live Sky Viewer PWA app!"/>
-        
-            <div className="space-y-3">
-                <p className='text-center '>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
-                <p className='text-center '>For guides and documentation please check
-                    your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
-            </div>
-        
-            <BaseButtons>
-                <BaseButton
-                    href='/login'
-                    label='Login'
-                    color='info'
-                    className='w-full'
-                />
-
-            </BaseButtons>
-        </CardBox>
+      <SectionFullScreen bg="none" className="relative overflow-hidden">
+        {/* Background Decorative Elements */}
+        <div className="absolute inset-0 z-0">
+            <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-[#E3B341]/10 rounded-full blur-[120px]"></div>
+            <div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-[#00F2FF]/5 rounded-full blur-[150px]"></div>
+            <div className="absolute inset-0 opacity-20" style={{ backgroundImage: 'radial-gradient(white 1px, transparent 0)', backgroundSize: '40px 40px' }}></div>
         </div>
-      </div>
-      </SectionFullScreen>
-      <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
-        <p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
-        <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
-            Privacy Policy
-        </Link>
-      </div>
 
+        <div className="relative z-10 container mx-auto px-6 py-12 flex flex-col items-center justify-center min-h-screen text-center">
+          <div className="mb-8 animate-pulse">
+             <div className="w-24 h-24 md:w-32 md:h-32 bg-[#E3B341] rounded-full flex items-center justify-center shadow-[0_0_50px_rgba(227,179,65,0.4)]">
+                <BaseIcon path={mdiTelescope} size={64} className="text-[#0B0D17]" />
+             </div>
+          </div>
+
+          <h1 className="text-5xl md:text-7xl font-bold tracking-tighter mb-4 text-transparent bg-clip-text bg-gradient-to-b from-white to-gray-400">
+            JWST <span className="text-[#E3B341]">LIVE</span> EXPLORER
+          </h1>
+          
+          <p className="text-xl md:text-2xl text-gray-400 max-w-2xl mb-12 font-light">
+            Deploy the world&apos;s most powerful infrared eye. Observe the deep universe in real-time through the lens of a physical simulation.
+          </p>
+
+          <div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-6">
+            <BaseButton
+              href="/observation"
+              label="Initiate Observation"
+              color="white"
+              icon={mdiCamera}
+              className="px-10 py-4 text-lg border-2 border-[#E3B341] bg-[#E3B341] text-[#0B0D17] hover:bg-transparent hover:text-[#E3B341] transition-all duration-300 rounded-none uppercase font-bold tracking-widest"
+            />
+            <BaseButton
+              href="/login"
+              label="Access Archives"
+              color="white"
+              icon={mdiDatabaseSearch}
+              className="px-10 py-4 text-lg border-2 border-white/20 bg-white/5 hover:bg-white/10 transition-all duration-300 rounded-none uppercase font-bold tracking-widest"
+            />
+          </div>
+
+          <div className="mt-24 grid grid-cols-1 md:grid-cols-3 gap-8 w-full max-w-5xl">
+             <div className="p-6 border border-white/10 bg-white/5 backdrop-blur-sm">
+                <h3 className="text-[#E3B341] font-bold mb-2 uppercase tracking-widest">IR Spectrum</h3>
+                <p className="text-sm text-gray-400">Visualize wavelengths beyond the visible light, piercing through cosmic dust.</p>
+             </div>
+             <div className="p-6 border border-white/10 bg-white/5 backdrop-blur-sm">
+                <h3 className="text-[#00F2FF] font-bold mb-2 uppercase tracking-widest">Deep Field</h3>
+                <p className="text-sm text-gray-400">High-resolution scans of distant galaxies from NASA&apos;s latest data releases.</p>
+             </div>
+             <div className="p-6 border border-white/10 bg-white/5 backdrop-blur-sm">
+                <h3 className="text-white font-bold mb-2 uppercase tracking-widest">Live Sync</h3>
+                <p className="text-sm text-gray-400">Sync with your device&apos;s camera for an augmented reality sky identification.</p>
+             </div>
+          </div>
+        </div>
+      </SectionFullScreen>
+
+      <footer className="relative z-10 border-t border-white/10 py-8 bg-[#0B0D17]">
+        <div className="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center text-sm text-gray-500">
+           <p>© 2026 {title}. Deep Space Simulation Protocol active.</p>
+           <div className="flex space-x-6 mt-4 md:mt-0">
+             <Link href="/privacy-policy" className="hover:text-white transition-colors">Security Manual</Link>
+             <Link href="/terms-of-use" className="hover:text-white transition-colors">Mission Parameters</Link>
+           </div>
+        </div>
+      </footer>
     </div>
   );
 }
@@ -163,4 +92,3 @@ export default function Starter() {
 Starter.getLayout = function getLayout(page: ReactElement) {
   return <LayoutGuest>{page}</LayoutGuest>;
 };
-

frontend/src/pages/observation.tsx

@@ -0,0 +1,229 @@
+
+import React, { useEffect, useRef, useState } from 'react';
+import type { ReactElement } from 'react';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import { mdiClose, mdiCamera, mdiTarget, mdiInformationOutline, mdiTelescope } from '@mdi/js';
+import BaseIcon from '../components/BaseIcon';
+import { useAppDispatch, useAppSelector } from '../stores/hooks';
+import { fetch as fetchSkyObjects } from '../stores/sky_objects/sky_objectsSlice';
+import LayoutAuthenticated from '../layouts/Authenticated';
+
+const ObservationPage = () => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isCameraActive, setIsCameraActive] = useState(false);
+  const [mode, setMode] = useState<'normal' | 'ir' | 'deep'>('normal');
+  const [scanning, setScanning] = useState(false);
+  const [identifiedObject, setIdentifiedObject] = useState<any>(null);
+  const [telemetry, setTelemetry] = useState({
+    temp: -233,
+    dist: 1.5,
+    focal: 131,
+  });
+
+  const dispatch = useAppDispatch();
+  const { sky_objects } = useAppSelector((state) => state.sky_objects);
+  const router = useRouter();
+
+  useEffect(() => {
+    dispatch(fetchSkyObjects({}));
+  }, [dispatch]);
+
+  const startCamera = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ 
+        video: { facingMode: 'environment' } 
+      });
+      if (videoRef.current) {
+        videoRef.current.srcObject = stream;
+        setIsCameraActive(true);
+      }
+    } catch (err) {
+      console.error("Camera access denied:", err);
+      alert("Camera access is required for live observation simulation.");
+    }
+  };
+
+  const stopCamera = () => {
+    if (videoRef.current && videoRef.current.srcObject) {
+      const tracks = (videoRef.current.srcObject as MediaStream).getTracks();
+      tracks.forEach(track => track.stop());
+      setIsCameraActive(false);
+    }
+  };
+
+  useEffect(() => {
+    return () => stopCamera();
+  }, []);
+
+  useEffect(() => {
+    if (scanning) {
+      const timeout = setTimeout(() => {
+        if (sky_objects.length > 0) {
+          const randomObj = sky_objects[Math.floor(Math.random() * sky_objects.length)];
+          setIdentifiedObject(randomObj);
+        }
+        setScanning(false);
+      }, 3000);
+      return () => clearTimeout(timeout);
+    }
+  }, [scanning, sky_objects]);
+
+  // Simulate telemetry fluctuations
+  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 = () => {
+    switch (mode) {
+      case 'ir': return 'contrast(1.2) brightness(1.1) hue-rotate(180deg) saturate(1.5)';
+      case 'deep': return 'contrast(1.5) brightness(0.8) saturate(0.5) blur(0.5px)';
+      default: return 'none';
+    }
+  };
+
+  return (
+    <div className="relative h-screen w-full bg-black overflow-hidden flex flex-col font-mono text-[#00F2FF]">
+      <Head>
+        <title>JWST | Live Observation</title>
+      </Head>
+
+      {/* Camera View */}
+      <div className="absolute inset-0 z-0 bg-gray-900">
+        {!isCameraActive && (
+          <div className="flex flex-col items-center justify-center h-full space-y-6">
+             <div className="w-24 h-24 border-2 border-[#E3B341] rounded-full flex items-center justify-center animate-pulse">
+                <BaseIcon path={mdiTelescope} size={48} className="text-[#E3B341]" />
+             </div>
+             <p className="text-[#E3B341] uppercase tracking-[0.3em] font-bold">Systems Offline</p>
+             <button 
+                onClick={startCamera}
+                className="bg-[#E3B341] text-black px-8 py-3 font-bold uppercase tracking-widest hover:bg-white transition-colors"
+             >
+                Initialize Deployment
+             </button>
+          </div>
+        )}
+        <video 
+          ref={videoRef} 
+          autoPlay 
+          playsInline 
+          muted 
+          className={`w-full h-full object-cover transition-all duration-1000 ${isCameraActive ? 'opacity-100' : 'opacity-0'}`}
+          style={{ filter: getFilter() }}
+        />
+      </div>
+
+      {/* JWST Hexagonal Overlay */}
+      {isCameraActive && (
+        <div className="absolute inset-0 z-10 pointer-events-none opacity-40">
+           <svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
+              <defs>
+                 <pattern id="hexagons" width="10" height="10" patternUnits="userSpaceOnUse" patternTransform="scale(1.5)">
+                    <path d="M5 0 L10 2.5 L10 7.5 L5 10 L0 7.5 L0 2.5 Z" fill="none" stroke="#E3B341" strokeWidth="0.1" />
+                 </pattern>
+              </defs>
+              <rect width="100%" height="100%" fill="url(#hexagons)" />
+           </svg>
+        </div>
+      )}
+
+      {/* Telemetry & UI */}
+      {isCameraActive && (
+        <div className="absolute inset-0 z-20 p-6 flex flex-col justify-between pointer-events-none">
+          {/* Top Bar */}
+          <div className="flex justify-between items-start pointer-events-auto">
+             <div className="bg-black/60 border-l-4 border-[#E3B341] p-4 backdrop-blur-md">
+                <div className="text-[10px] text-gray-400 uppercase tracking-tighter">System Status</div>
+                <div className="flex items-center space-x-2">
+                   <div className="w-2 h-2 bg-green-500 rounded-full animate-ping"></div>
+                   <div className="font-bold text-white tracking-widest uppercase">Operational</div>
+                </div>
+                <div className="mt-2 grid grid-cols-2 gap-x-4 text-[10px]">
+                   <div>TEMP: <span className="text-[#E3B341]">{telemetry.temp.toFixed(1)}K</span></div>
+                   <div>L2 DIST: <span className="text-[#E3B341]">{telemetry.dist.toFixed(3)}M km</span></div>
+                </div>
+             </div>
+
+             <button 
+               onClick={stopCamera}
+               className="p-2 bg-black/60 border border-white/20 hover:bg-red-500/40 transition-colors"
+             >
+               <BaseIcon path={mdiClose} size={24} className="text-white" />
+             </button>
+          </div>
+
+          {/* Identification Box */}
+          <div className="flex justify-center mb-12">
+             <div className="bg-black/60 border border-[#00F2FF]/40 p-6 backdrop-blur-md w-full max-w-md relative overflow-hidden">
+                {scanning && (
+                  <div className="absolute inset-0 bg-[#00F2FF]/10 animate-pulse"></div>
+                )}
+                <div className="flex items-center space-x-4 mb-4">
+                   <div className={`p-2 rounded-full border ${scanning ? 'border-[#00F2FF] animate-spin' : 'border-gray-500'}`}>
+                      <BaseIcon path={mdiTarget} size={24} className={scanning ? 'text-[#00F2FF]' : 'text-gray-500'} />
+                   </div>
+                   <div>
+                      <div className="text-[10px] uppercase text-gray-400 tracking-widest">Active Search</div>
+                      <div className="font-bold text-lg uppercase tracking-widest">
+                        {scanning ? 'Analyzing Spectrum...' : identifiedObject ? identifiedObject.name : 'No Target Lock'}
+                      </div>
+                   </div>
+                </div>
+                {identifiedObject && !scanning && (
+                  <div className="text-xs text-gray-300 border-t border-white/10 pt-4 space-y-1">
+                     <p><span className="text-[#00F2FF]">COORDINATES:</span> {identifiedObject.ra || 'N/A'}, {identifiedObject.dec || 'N/A'}</p>
+                     <p><span className="text-[#00F2FF]">CLASSIFICATION:</span> {identifiedObject.type || 'STEL-OBJ'}</p>
+                     <p className="mt-2 line-clamp-2">{identifiedObject.description}</p>
+                  </div>
+                )}
+                {!scanning && (
+                   <button 
+                     onClick={() => setScanning(true)}
+                     className="mt-4 w-full bg-[#00F2FF]/20 border border-[#00F2FF] py-2 text-[10px] uppercase tracking-[0.4em] font-bold hover:bg-[#00F2FF] hover:text-black transition-all pointer-events-auto"
+                   >
+                     Initiate Deep Scan
+                   </button>
+                )}
+             </div>
+          </div>
+
+          {/* Bottom Controls */}
+          <div className="flex justify-center space-x-4 pointer-events-auto pb-6">
+             {[
+               { id: 'normal', label: 'VIS', color: 'bg-white/10 text-white' },
+               { id: 'ir', label: 'NIRSpec', color: 'bg-[#E3B341]/20 text-[#E3B341]' },
+               { id: 'deep', label: 'MIRI', color: 'bg-purple-500/20 text-purple-300' }
+             ].map(btn => (
+                <button
+                  key={btn.id}
+                  onClick={() => setMode(btn.id as any)}
+                  className={`px-6 py-2 border transition-all ${btn.color} ${mode === btn.id ? 'border-current' : 'border-transparent opacity-50 hover:opacity-100'}`}
+                >
+                  <div className="text-[10px] uppercase font-bold tracking-widest">{btn.label}</div>
+                </button>
+             ))}
+          </div>
+        </div>
+      )}
+
+      {/* Static Footer (only visible when not active or on desktop) */}
+      <div className="absolute bottom-4 right-4 text-[8px] text-gray-600 uppercase tracking-[0.5em] pointer-events-none">
+         Mission Protocol: JWST-MAIN-SYS-V2.0.26
+      </div>
+    </div>
+  );
+};
+
+ObservationPage.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
+};
+
+export default ObservationPage;