Merge branch 'dev' into simulation

README.md

@@ -1,3 +1,70 @@
 # Deep Impact
 
-![Deep Impace](https://dalle-image-storage.s3.amazonaws.com/1715997915066.jpeg)
+![Deep Impact](https://dalle-image-storage.s3.amazonaws.com/1715997915066.jpeg)
+
+## Overview
+
+Deep Impact is a web application designed to provide users with insights into the potential dangers of asteroid impacts. Utilizing the NASA NeoWs API, we've developed a simulation tool that visualizes incoming asteroids and explores various methods of asteroid deflection.
+
+### Our Team
+
+- Daniel Smith-dePaz
+- Jordan Yamada
+- Pierre Bell
+- Michael Roy
+- Mickey Shoenberger
+- Jordan Edgington
+
+To learn more about Deep Impact, check out our [Deep Impact GitHub](https://github.com/Team-Deep-Impact/Deep-Impact).
+
+## Features
+
+1. **Asteroid Visualization**: Visualize incoming asteroids using real-time data from the NASA NeoWs API.
+2. **Scenario & Deflection Strategies**: Explore various methods of asteroid deflection, such as Nuclear Detonation, Kinetic Impact, and Gravity Tractor.
+3. **Simulation Tool**: Simulate asteroid trajectories and deflection outcomes.
+4. **Dashboard**: View the dashboard, and other pages with relevant information and insights.
+
+## Getting Started
+
+### Django Backend Setup
+
+1. **Set Up Python Environment**:
+    - Vanilla Python:
+        ```sh
+        python -m venv deep-impact-env
+        ```
+    - Virtual Environment Wrapper:
+        ```sh
+        mkvirtualenv deep-impact-env
+        ```
+    - Activate the environment:
+        ```sh
+        source deep-impact-env/bin/activate
+        ```
+
+2. **Install Required Packages**:
+    - Navigate to the backend directory and install dependencies:
+        ```sh
+        cd Deep-Impact/backend/deep_impact_proj
+        pip install -r requirements.txt
+        ```
+
+### Vite Frontend Setup
+
+1. **Install Node Modules**:
+    - Navigate to the frontend directory and install dependencies:
+        ```sh
+        npm install
+        ```
+
+2. **Run Development Server**:
+    - Start the development server:
+        ```sh
+        npm run dev
+        ```
+
+## License
+
+Deep Impact is open-source software released under the [MIT License](LICENSE). Feel free to use, modify, and distribute the codebase in accordance with the terms of the license.
+
+Thank you for choosing Deep Impact. We hope you enjoy exploring our project and learning more about asteroid impacts!

backend/deep_impact_proj/.env.sample

@@ -0,0 +1,6 @@
+SECRET_KEY=<"Your Django Secret Key">
+SENTRY_API_KEY=<"Your NASA Sentry API Key">
+OPENAI_API_KEY=<"Your OpenAI API Key">
+HOST_CLIENT=<"Your FrontEnd URL">
+ALLOWED_HOSTS=<"Your Server URL">
+DEBUG=<"True for Deployment | False for Development">

backend/deep_impact_proj/.gitignore

@@ -0,0 +1,2 @@
+.env
+.venv

backend/deep_impact_proj/api_app/admin.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

backend/deep_impact_proj/api_app/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class ApiAppConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'api_app'

backend/deep_impact_proj/api_app/models.py

@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.

backend/deep_impact_proj/api_app/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

backend/deep_impact_proj/api_app/urls.py

@@ -0,0 +1,9 @@
+from django.urls import path
+from .views import Sentry, OpenAI
+
+
+
+urlpatterns = [
+    path('sentry/', Sentry.as_view(), name='sentry'),
+    path('openai/', OpenAI.as_view(), name='openai'),
+]

backend/deep_impact_proj/api_app/utils.py

@@ -0,0 +1,23 @@
+from django.core.exceptions import ValidationError
+import os
+import requests
+from rest_framework.response import Response
+from rest_framework.status import (
+    HTTP_200_OK,
+    HTTP_204_NO_CONTENT,
+    HTTP_201_CREATED,
+    HTTP_400_BAD_REQUEST
+)
+
+
+sentry_api_key = os.environ.get("SENTRY_API_KEY")
+
+def get_sentry():
+    try:
+        response = requests.get(f'https://api.nasa.gov/neo/rest/v1/neo/browse?api_key={sentry_api_key}')
+        response.raise_for_status()
+        data = response.json()
+        return Response(data, status=HTTP_200_OK)
+    except ValidationError as e:
+        print(e)
+        return Response(e, status=HTTP_400_BAD_REQUEST)

backend/deep_impact_proj/api_app/views.py

@@ -0,0 +1,26 @@
+from django.shortcuts import render
+from django.core.exceptions import ValidationError
+import os
+import requests
+from rest_framework.views import APIView
+from rest_framework.response import Response
+from rest_framework.status import (
+    HTTP_200_OK,
+    HTTP_204_NO_CONTENT,
+    HTTP_201_CREATED,
+    HTTP_400_BAD_REQUEST
+)
+from .utils import get_sentry
+
+sentry_api_key = os.environ.get("SENTRY_API_KEY")
+
+
+
+# Create your views here.
+class Sentry(APIView):
+    def get(self, request):
+        return get_sentry()
+
+
+class OpenAI(APIView):
+    pass

backend/deep_impact_proj/deep_impact_proj/asgi.py

@@ -0,0 +1,16 @@
+"""
+ASGI config for deep_impact_proj project.
+
+It exposes the ASGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/5.0/howto/deployment/asgi/
+"""
+
+import os
+
+from django.core.asgi import get_asgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'deep_impact_proj.settings')
+
+application = get_asgi_application()

backend/deep_impact_proj/deep_impact_proj/settings.py

@@ -0,0 +1,138 @@
+"""
+Django settings for deep_impact_proj project.
+
+Generated by 'django-admin startproject' using Django 5.0.4.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/5.0/topics/settings/
+
+For the full list of settings and their values, see
+https://docs.djangoproject.com/en/5.0/ref/settings/
+"""
+import os
+from pathlib import Path
+from dotenv import load_dotenv
+
+# Load environment variables from .env file
+load_dotenv()
+
+
+# Build paths inside the project like this: BASE_DIR / 'subdir'.
+BASE_DIR = Path(__file__).resolve().parent.parent
+
+
+# Quick-start development settings - unsuitable for production
+# See https://docs.djangoproject.com/en/5.0/howto/deployment/checklist/
+
+# SECURITY WARNING: keep the secret key used in production secret!
+SECRET_KEY = os.environ.get("SECRET_KEY")
+
+# SECURITY WARNING: don't run with debug turned on in production!
+DEBUG = os.environ.get("DEBUG")
+
+ALLOWED_HOSTS = [os.environ.get("ALLOWED_HOSTS"), "localhost"]
+
+
+# Application definition
+
+INSTALLED_APPS = [
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+    'corsheaders',
+    'api_app',
+    'rest_framework',
+]
+
+MIDDLEWARE = [
+    'django.middleware.security.SecurityMiddleware',
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    'corsheaders.middleware.CorsMiddleware',
+    'django.middleware.common.CommonMiddleware',
+    'django.middleware.csrf.CsrfViewMiddleware',
+    'django.contrib.auth.middleware.AuthenticationMiddleware',
+    'django.contrib.messages.middleware.MessageMiddleware',
+    'django.middleware.clickjacking.XFrameOptionsMiddleware',
+]
+
+ROOT_URLCONF = 'deep_impact_proj.urls'
+
+
+
+CORS_ALLOWED_ORIGINS = [os.environ.get("HOST_CLIENT")]
+
+
+
+TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [],
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
+]
+
+WSGI_APPLICATION = 'deep_impact_proj.wsgi.application'
+
+
+# Database
+# https://docs.djangoproject.com/en/5.0/ref/settings/#databases
+
+DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': BASE_DIR / 'db.sqlite3',
+    }
+}
+
+
+# Password validation
+# https://docs.djangoproject.com/en/5.0/ref/settings/#auth-password-validators
+
+AUTH_PASSWORD_VALIDATORS = [
+    {
+        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
+    },
+]
+
+
+# Internationalization
+# https://docs.djangoproject.com/en/5.0/topics/i18n/
+
+LANGUAGE_CODE = 'en-us'
+
+TIME_ZONE = 'UTC'
+
+USE_I18N = True
+
+USE_TZ = True
+
+
+# Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/5.0/howto/static-files/
+
+STATIC_URL = 'static/'
+
+# Default primary key field type
+# https://docs.djangoproject.com/en/5.0/ref/settings/#default-auto-field
+
+DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

backend/deep_impact_proj/deep_impact_proj/urls.py

@@ -0,0 +1,23 @@
+"""
+URL configuration for deep_impact_proj project.
+
+The `urlpatterns` list routes URLs to views. For more information please see:
+    https://docs.djangoproject.com/en/5.0/topics/http/urls/
+Examples:
+Function views
+    1. Add an import:  from my_app import views
+    2. Add a URL to urlpatterns:  path('', views.home, name='home')
+Class-based views
+    1. Add an import:  from other_app.views import Home
+    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
+Including another URLconf
+    1. Import the include() function: from django.urls import include, path
+    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
+"""
+from django.contrib import admin
+from django.urls import path, include
+
+urlpatterns = [
+    path('admin/', admin.site.urls),
+    path('api/', include('api_app.urls')),
+]

backend/deep_impact_proj/deep_impact_proj/wsgi.py

@@ -0,0 +1,16 @@
+"""
+WSGI config for deep_impact_proj project.
+
+It exposes the WSGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/5.0/howto/deployment/wsgi/
+"""
+
+import os
+
+from django.core.wsgi import get_wsgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'deep_impact_proj.settings')
+
+application = get_wsgi_application()

backend/deep_impact_proj/manage.py

@@ -0,0 +1,22 @@
+#!/usr/bin/env python
+"""Django's command-line utility for administrative tasks."""
+import os
+import sys
+
+
+def main():
+    """Run administrative tasks."""
+    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'deep_impact_proj.settings')
+    try:
+        from django.core.management import execute_from_command_line
+    except ImportError as exc:
+        raise ImportError(
+            "Couldn't import Django. Are you sure it's installed and "
+            "available on your PYTHONPATH environment variable? Did you "
+            "forget to activate a virtual environment?"
+        ) from exc
+    execute_from_command_line(sys.argv)
+
+
+if __name__ == '__main__':
+    main()

backend/deep_impact_proj/requirements.txt

@@ -0,0 +1,17 @@
+asgiref==3.8.1
+certifi==2024.2.2
+charset-normalizer==3.3.2
+click==8.1.7
+Django==5.0.6
+django-cors-headers==4.2.0
+djangorestframework==3.15.1
+gunicorn==22.0.0
+h11==0.14.0
+idna==3.7
+packaging==24.0
+python-dotenv==1.0.1
+requests==2.31.0
+sqlparse==0.5.0
+urllib3==2.2.1
+uvicorn==0.29.0
+whitenoise==6.6.0

frontend/index.html

@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/" href="/DeepImpact_Logo.jpeg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>Deep Impact</title>
   </head>
   <body>
     <div id="root"></div>

frontend/src/components/navbar.jsx

@@ -9,6 +9,8 @@ function NavBar() {
                 <li><Link to='/'><p className='text-2xl text-white hover:text-red-900'>Main</p></Link></li>
                 <li><Link to='scenario/'><p className='text-2xl text-white hover:text-red-900'>Scenario</p></Link></li>
                 <li><Link to='about/'><p className='text-2xl text-white hover:text-red-900'>About</p></Link></li>
+                <li><Link to='effects/'><p className='text-2xl text-white hover:text-red-900'>Effects</p></Link></li>
+                <li><Link to='defenses/'><p className='text-2xl text-white hover:text-red-900'>Defenses</p></Link></li>
             </ul>
         </div>
       </>

frontend/src/pages/about.jsx

@@ -1,13 +1,28 @@
 function About() {
-  
+
     return (
       <>
-        <div>
+        <div className='text-white text-center flex flex-col w-1/2'>
-            <p>About</p>
+            <div className='m-4'>
+            <p className='text-2xl underline mb-2'>What is Deep Impact?</p>
+            <p>Deep impact is a web-app designed to give users insight into potential danger of asteroid impact. Using the NASA NeoWs API we have created a simulation tool to visualize incoming asteroids and various methods of asteroid deflection.</p>
+            </div>
+            <div className='m-4'>
+            <p className='text-2xl underline mb-2'>Our Team</p>
+            <ul>
+              <li>Daniel Smith-dePaz</li>
+              <li>Jordan Yamada</li>
+              <li>Pierre Bell</li>
+              <li>Michael Roy</li>
+              <li>Mickey Shoenberger</li>
+              <li>Jordan Edgington</li>
+            </ul>
+            </div>
+            <p className='italic m-4'>The Sky Is Falling!</p>
+            <p className='m-4'>To see learn more about Deep Impact, checkout our <a href='https://github.com/Team-Deep-Impact/Deep-Impact' className='underline hover:text-red-900'>GitHub</a>.</p>
         </div>
       </>
     )
   }
-  
+
   export default About
-  

frontend/src/pages/defenses.jsx

@@ -0,0 +1,107 @@
+
+const Defenses = () => {
+  return (
+    <>
+      <div>
+          <h1 className="text-center text-2xl text-white my-5">Defensive Options</h1>
+          <h2 className="text-center underline text-xl text-white my-5">What Can We Do?</h2>
+          <p className="text-l text-white">Defending Earth against potentially hazardous meteors or asteroids involves several strategies and technologies, primarily focused on detection, deflection, and disruption. Here are the primary defense options:</p>
+          <h3 className="text-xl text-white my-5">Early Detection and Monitoring</h3>
+          <ul>
+        <li className="text-l text-white mb-3">
+          <strong>Space-Based Telescopes:</strong> Deploying telescopes in space to continuously monitor the sky for Near-Earth Objects (NEOs). Examples include NASA’s NEOWISE mission and the upcoming NEOCam.
+        </li>
+        <li className="text-l text-white mb-3">
+          <strong>Ground-Based Telescopes:</strong> Utilizing a network of observatories around the world to detect and track asteroids. Projects like the Pan-STARRS and the Catalina Sky Survey are part of this effort.
+        </li>
+        <li className="text-l text-white mb-3">
+          <strong>Data Sharing and Coordination:</strong> International collaboration through organizations like the International Asteroid Warning Network (IAWN) and the Space Mission Planning Advisory Group (SMPAG) to share data and coordinate responses.
+        </li>
+      </ul>
+          <h3 class="text-xl text-white my-5">Deflection Techniques</h3>
+          <ul>
+        <li className="text-l text-white mb-3">
+          <strong>Kinetic Impactor:</strong> This involves sending a spacecraft to collide with the asteroid at high speed, changing its trajectory. NASA’s Double Asteroid Redirection Test (DART) mission is an example, scheduled to test this method on the moonlet of the asteroid Didymos.
+        </li>
+        <li className="text-l text-white mb-3">
+          <strong>Gravity Tractor:</strong> A spacecraft would fly alongside the asteroid for an extended period, using its gravitational pull to gradually alter the asteroid’s path.
+        </li>
+        <li className="text-l text-white mb-3">
+          <strong>Ion Beam Shepherd:</strong> This concept involves using ion thrusters to create a continuous stream of particles that push against the asteroid, slowly changing its trajectory over time.
+        </li>
+      </ul>
+      <h3 class="text-xl text-white my-5">Disruption Techniques</h3>
+      <ul>
+        <li className="text-l text-white mb-3">
+          <strong>Nuclear Explosions:</strong> A nuclear device could be detonated near or on the asteroid to either vaporize a portion of it or to alter its course significantly. This is considered a last resort due to the potential for fragmenting the asteroid into multiple pieces, which might still pose a threat.
+        </li>
+        <li className="text-l text-white mb-3">
+          <strong>Laser Ablation:</strong> Using high-powered lasers to vaporize the surface of the asteroid, creating jets of gas that would act as a propulsion mechanism to nudge the asteroid off course.
+        </li>
+      </ul>
+      <h3 class="text-xl text-white my-5">Civil Protection and Mitigation</h3>
+      <ul>
+        <li className="text-l text-white mb-3">
+          <strong>Impact Prediction and Modeling:</strong> Improved computer models to predict impact locations, potential damage, and secondary effects like tsunamis and atmospheric changes.
+        </li>
+        <li className="text-l text-white mb-3">
+          <strong>Evacuation Plans:</strong> Developing and rehearsing evacuation plans for regions identified as potential impact sites.
+        </li>
+        <li className="text-l text-white mb-3">
+          <strong>Global Response Coordination:</strong> Establishing international protocols for disaster response, resource distribution, and public communication.
+        </li>
+      </ul>
+      <h3 class="text-xl text-white my-5">General Effects on Human Civilization</h3>
+      <ul>
+        <li className="text-l text-white mb-3">
+          <strong>Economic Disruption:</strong> Severe damage to infrastructure, agriculture, and resources can lead to economic collapse in affected regions.
+        </li>
+        <li className="text-l text-white mb-3">
+          <strong>Human Casualties:</strong> Direct impact areas would suffer heavy casualties, with potential global consequences from secondary effects like famine and disease.
+        </li>
+        <li className="text-l text-white mb-3">
+          <strong>Global Cooperation and Response:</strong> Such an event would likely necessitate global cooperation for disaster response, food distribution, and potentially relocation of populations.
+        </li>
+      </ul>
+      <h3 class="text-xl text-white my-5">International Collaboration and Policy Development</h3>
+      <ul>
+        <li className="text-l text-white mb-3">
+          <strong>Space Treaties and Agreements:</strong> Strengthening international treaties and agreements to ensure cooperation and shared responsibility in asteroid detection and deflection efforts.
+        </li>
+        <li className="text-l text-white mb-3">
+          <strong>Funding and Research:</strong> Increasing funding for asteroid research, detection programs, and the development of deflection technologies.
+        </li>
+      </ul>
+      <h3 class="text-xl text-white my-5">Key Missions and Programs</h3>
+      <ul>
+        <li className="text-l text-white mb-3">
+          <strong>NASA’s Planetary Defense Coordination Office (PDCO):</strong>  Coordinates efforts to detect, track, and characterize potentially hazardous asteroids and comets.
+        </li>
+        <li className="text-l text-white mb-3">
+          <strong>ESA’s Hera Mission:</strong> A follow-up to NASA’s DART mission, Hera will study the aftermath of the DART impact to gather critical data on the effectiveness of kinetic impactors.
+        </li>
+        <li className="text-l text-white mb-3">
+          <strong>Space Situational Awareness (SSA) Program:</strong> Run by the European Space Agency (ESA) to detect and track objects that pose a risk to Earth or to satellites in orbit.
+        </li>
+      </ul>
+      <h3 class="text-xl text-white my-5">Challenges and Considerations</h3>
+      <ul>
+        <li className="text-l text-white mb-3">
+          <strong>Timely Detection:</strong> Early detection is crucial, as deflection methods are more effective when applied well in advance of a potential impact.
+        </li>
+        <li className="text-l text-white mb-3">
+          <strong>Technological Development:</strong> Many of the proposed deflection techniques are still in the research or testing phase and require further development.
+        </li>
+        <li className="text-l text-white mb-3">
+          <strong>International Cooperation:</strong> Effective planetary defense requires global collaboration, as the impact of a large asteroid would have worldwide consequences.
+        </li>
+      </ul>
+      <div class="mt-3">
+          <p class="text-l text-white mb-10">By combining these strategies, the global community aims to protect Earth from the potentially devastating effects of asteroid impacts.</p>
+          </div>
+      </div>
+    </>
+  )
+}
+
+export default Defenses

frontend/src/pages/effects.jsx

@@ -0,0 +1,86 @@
+
+const Effects = () => {
+  return (
+    <>
+      <div>
+          <h1 className="text-center text-2xl text-white my-5">Effects of an Impact</h1>
+          <h2 className="text-center underline text-xl text-white my-5">The Impact of a Meteor Hitting Earth</h2>
+          <p className="text-l text-white">The impact of a meteor hitting Earth can vary widely depending on the size, composition, speed, and location of the impact. Here are the key impacts based on the size of the meteor:</p>
+          <h3 className="text-xl text-white my-5">Small Meteors (up to 25 meters in diameter)</h3>
+          <ul>
+        <li className="text-l text-white mb-3">
+          <strong>Atmospheric Entry:</strong> These meteors typically burn up upon entering the Earth’s atmosphere, causing a bright flash and potentially a sonic boom.
+        </li>
+        <li className="text-l text-white mb-3">
+          <strong>Damage:</strong> If fragments reach the ground, they may cause minor damage locally, such as breaking windows or small craters. An example is the Chelyabinsk meteor in 2013, which caused injuries mainly from broken glass.
+        </li>
+      </ul>
+          <h3 class="text-xl text-white my-5">Medium Meteors (25 meters to 1 kilometer in diameter)</h3>
+          <ul>
+        <li className="text-l text-white mb-3">
+          <strong>Local Destruction:</strong> A meteor in this size range can cause significant local destruction, including fires, shockwaves, and substantial craters.
+        </li>
+        <li className="text-l text-white mb-3">
+          <strong>Tsunamis:</strong> If it impacts an ocean, it can generate large tsunamis capable of affecting coastal areas over a wide region.
+        </li>
+        <li className="text-l text-white mb-3">
+          <strong>Climate Effects:</strong> Dust and debris thrown into the atmosphere can lead to short-term climate changes, such as “impact winter,” where sunlight is blocked, leading to global cooling and agricultural impacts.
+        </li>
+      </ul>
+      <h3 class="text-xl text-white my-5">Large Meteors (1 kilometer to 10 kilometers in diameter)</h3>
+      <ul>
+        <li className="text-l text-white mb-3">
+          <strong>Regional to Global Catastrophe:</strong> These impacts can cause massive destruction over hundreds of kilometers from the impact site. The blast, heat, and shockwave can annihilate life forms in the vicinity.
+        </li>
+        <li className="text-l text-white mb-3">
+          <strong>Tsunamis:</strong> If the impact occurs in the ocean, it would generate massive tsunamis with potentially devastating global effects on coastal regions.
+        </li>
+        <li className="text-l text-white mb-3">
+          <strong>Climate Disruption:</strong> The impact would throw vast amounts of dust, ash, and aerosols into the atmosphere, potentially causing global cooling for years. This can disrupt ecosystems, agriculture, and food supplies globally.
+        </li>
+        <li className="text-l text-white mb-3">
+          <strong>Extinctions:</strong> Such an event can lead to mass extinctions due to the combination of immediate destruction, climatic effects, and ecological collapse. The most well-known example is the Chicxulub impactor, which contributed to the extinction of the dinosaurs 66 million years ago.
+        </li>
+      </ul>
+      <h3 class="text-xl text-white my-5">Very Large Meteors (over 10 kilometers in diameter)</h3>
+      <ul>
+        <li className="text-l text-white mb-3">
+          <strong>Global Catastrophe:</strong> These are extremely rare but can cause near-instantaneous global devastation.
+        </li>
+        <li className="text-l text-white mb-3">
+          <strong>Immediate Effects:</strong> Massive firestorms, shockwaves, and tsunamis would affect the entire planet.
+        </li>
+        <li className="text-l text-white mb-3">
+          <strong>Long-term Effects:</strong> Severe climate changes, including extended “impact winters,” leading to mass extinctions and potentially the collapse of human civilization.
+        </li>
+      </ul>
+      <h3 class="text-xl text-white my-5">General Effects on Human Civilization</h3>
+      <ul>
+        <li className="text-l text-white mb-3">
+          <strong>Economic Disruption:</strong> Severe damage to infrastructure, agriculture, and resources can lead to economic collapse in affected regions.
+        </li>
+        <li className="text-l text-white mb-3">
+          <strong>Human Casualties:</strong> Direct impact areas would suffer heavy casualties, with potential global consequences from secondary effects like famine and disease.
+        </li>
+        <li className="text-l text-white mb-3">
+          <strong>Global Cooperation and Response:</strong> Such an event would likely necessitate global cooperation for disaster response, food distribution, and potentially relocation of populations.
+        </li>
+      </ul>
+      <h3 class="text-xl text-white my-5">Mitigation and Prevention</h3>
+      <ul>
+        <li className="text-l text-white mb-3">
+          <strong>Early Detection:</strong> Advances in space observation aim to detect potential impactors well in advance. Programs like NASA’s Near-Earth Object (NEO) Observations Program work towards this goal.
+        </li>
+        <li className="text-l text-white mb-3">
+          <strong>Deflection Strategies:</strong> Potential strategies for deflecting an asteroid include kinetic impactors, gravitational tractors, or even nuclear devices to alter the asteroid’s trajectory.
+        </li>
+      </ul>
+      <div class="mt-3">
+          <p class="text-l text-white mb-10">In summary, while the impact of small meteors is relatively minor and localized, large meteors can have devastating global consequences. Preparedness and mitigation strategies are essential for minimizing the potential impacts of such events.</p>
+          </div>
+      </div>
+    </>
+  )
+}
+
+export default Effects

frontend/src/pages/main.jsx

@@ -4,7 +4,7 @@ function Main() {
   
     return (
       <>
-        <div>
+        <div className='w-7/12'>
             <h1 class="text-center text-2xl text-white my-5">Welcome to Deep Impact!</h1>
             <h2 class="text-center underline text-xl text-white my-5">Close Approaches</h2>
             <h3 class="text-xl text-white my-3">How close?</h3>

frontend/src/pages/scenario.jsx

@@ -3,7 +3,7 @@ import { Stage, Layer, Circle, Text, Line } from 'react-konva';
 import { Slider, Button } from '@mui/material';
 import axios from 'axios';
 
-const API_KEY = 'LF7i77oqghRiq54HEFJh991WgjHcKsETP9D5ofsg';
+
 const EARTH_RADIUS_KM = 6371; // Earth's radius in kilometers
 const EARTH_DISPLAY_SCALE = 0.01; // Display scale for Earth
 const ASTEROID_DISPLAY_SCALE = 0.3; // Display scale for asteroids
@@ -47,9 +47,9 @@ function Scenario() {
 
 
   useEffect(() => {
-    const fetchAsteroids = async () => {
+    const fetchAsteroids = async (self, request) => {
       try {
-        const response = await axios.get(`https://api.nasa.gov/neo/rest/v1/neo/browse?api_key=${API_KEY}`);
+        const response = await axios.get(`http://localhost:8000/api/sentry/`);
         asteroidsData.current = response.data.near_earth_objects;
         setAsteroidData(0); // Set initial asteroid
       } catch (error) {

frontend/src/router.jsx

@@ -4,6 +4,8 @@ import App from "./App";
 import Main from "./pages/main";
 import Scenario from "./pages/scenario";
 import About from "./pages/about";
+import Effects from "./pages/effects";
+import Defenses from "./pages/defenses";
 const router = createBrowserRouter([
   {
     path: "/",
@@ -20,8 +22,15 @@ const router = createBrowserRouter([
       {
         path: 'about/',
         element: <About />
+      },
+      {
+        path: 'effects/',
+        element: <Effects />
+      },
+      {
+        path: 'defenses/',
+        element: <Defenses />
       }
-      
     ],
   },
 ]);