import React, { useState, useEffect } from 'react'; import MapComponent from './components/MapComponent'; import EventList from './components/EventList'; import DataControls from './components/DataControls'; import './App.css'; function App() { const [events, setEvents] = useState([]); const [loading, setLoading] = useState(true); const [timeRange, setTimeRange] = useState('24h'); const [eventType, setEventType] = useState('all'); useEffect(() => { const fetchData = async () => { try { // Simulate API call to get real-time data const response = await fetch(`/api/events?range=${timeRange}&type=${eventType}`); const data = await response.json(); setEvents(data); } catch (error) { console.error('Error fetching data:', error); } finally { setLoading(false); } }; fetchData(); const interval = setInterval(fetchData, 300000); // Refresh every 5 minutes return () => clearInterval(interval); }, [timeRange, eventType]); return (

Earth Geological Event Predictor

); } export default App; import React from 'react'; import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'; import L from 'leaflet'; import 'leaflet/dist/leaflet.css'; const getIcon = (type) => { const size = 32; return L.divIcon({ html: `

${type === 'earthquake' ? 'E' : type === 'volcano' ? 'V' : 'F'}

`, className: '', iconSize: [size, size], }); }; const MapComponent = ({ events }) => { return (

{events.map((event, index) => (

{event.location}

Type: {event.type}

Magnitude: {event.magnitude}

Date: {new Date(event.timestamp).toLocaleString()}

Probability: {event.probability}%

))}

); }; export default MapComponent; import React from 'react'; const EventList = ({ events, loading }) => { const getTypeColor = (type) => { switch(type) { case 'earthquake': return 'red'; case 'volcano': return 'orange'; case 'flood': return 'blue'; default: return 'gray'; } }; return (

Recent Events

{loading ? (

Loading data...

) : events.length === 0 ? (

No events found for selected criteria

) : (

{event.location}

{new Date(event.timestamp).toLocaleString()} | {event.latitude.toFixed(2)}°N, {event.longitude.toFixed(2)}°E | Probability: {event.probability}%

{event.type === 'earthquake' ? `Magnitude ${event.magnitude} earthquake predicted` : event.type === 'volcano' ? 'Volcanic activity detected' : 'Potential flooding from ice melt detected'}

)}

); }; export default EventList; import React from 'react'; const DataControls = ({ timeRange, setTimeRange, eventType, setEventType }) => { return (

Time Range:

Event Type:

); }; export default DataControls; .app { display: flex; flex-direction: column; height: 100vh; font-family: Arial, sans-serif; } .app-header { background-color: #282c34; color: white; padding: 1rem; text-align: center; } .dashboard { display: flex; flex: 1; padding: 1rem; gap: 1rem; } .map-container { flex: 2; height: calc(100vh - 200px); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .event-list { flex: 1; overflow-y: auto; padding: 1rem; border-radius: 8px; background-color: #f8f9fa; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .event-item { display: flex; margin-bottom: 1rem; padding: 0.5rem; background-color: white; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .event-type { width: 12px; height: 12px; border-radius: 50%; margin-right: 0.75rem; margin-top: 0.25rem; } .event-details { flex: 1; } .event-meta { font-size: 0.8rem; color: #666; } .event-description { margin-top: 0.5rem; font-size: 0.9rem; } .data-controls { display: flex; justify-content: center; gap: 2rem; padding: 1rem; background-color: #f8f9fa; border-radius: 8px; margin: 0 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .control-group { display: flex; align-items: center; gap: 0.5rem; } select { padding: 0.5rem; border-radius: 4px; border: 1px solid #ddd; } @media (max-width: 768px) { .dashboard { flex-direction: column; } .map-container { height: 50vh; } } import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import './index.css'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } export const mockEvents = [ { id: 1, type: 'earthquake', location: 'Pacific Ocean, near Japan', latitude: 35.6895, longitude: 139.6917, magnitude: 6.7, probability: 78, timestamp: '2023-05-15T08:30:00Z' }, { id: 2, type: 'volcano', location: 'Mount Etna, Italy', latitude: 37.7510, longitude: 14.9934, magnitude: null, probability: 65, timestamp: '2023-05-14T14:15:00Z' }, { id: 3, type: 'flood', location: 'Himalayas, Nepal', latitude: 27.9881, longitude: 86.9250, magnitude: null, probability: 82, timestamp: '2023-05-13T10:45:00Z' }, { id: 4, type: 'earthquake', location: 'California, USA', latitude: 36.7783, longitude: -119.4179, magnitude: 5.2, probability: 45, timestamp: '2023-05-12T18:20:00Z' }, { id: 5, type: 'volcano', location: 'Kilauea, Hawaii', latitude: 19.4210, longitude: -155.2869, magnitude: null, probability: 90, timestamp: '2023-05-11T22:10:00Z' } ];