|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>General Relativity Explained Simply</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
.space-time { |
|
background: radial-gradient(circle at center, #0f172a 0%, #1e293b 100%); |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
.gravity-well { |
|
position: absolute; |
|
border-radius: 50%; |
|
background: rgba(255, 255, 255, 0.05); |
|
box-shadow: inset 0 0 50px rgba(255, 215, 0, 0.3); |
|
} |
|
.particle { |
|
position: absolute; |
|
border-radius: 50%; |
|
background: white; |
|
box-shadow: 0 0 10px white; |
|
} |
|
.equation-box { |
|
background: rgba(255, 255, 255, 0.1); |
|
backdrop-filter: blur(10px); |
|
border-radius: 8px; |
|
transition: all 0.3s ease; |
|
} |
|
.equation-box:hover { |
|
transform: scale(1.02); |
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); |
|
} |
|
.concept-card { |
|
perspective: 1000px; |
|
} |
|
.concept-inner { |
|
transition: transform 0.6s; |
|
transform-style: preserve-3d; |
|
} |
|
.concept-card:hover .concept-inner { |
|
transform: rotateY(180deg); |
|
} |
|
.concept-front, .concept-back { |
|
backface-visibility: hidden; |
|
} |
|
.concept-back { |
|
transform: rotateY(180deg); |
|
} |
|
.tensor-visualization { |
|
background: conic-gradient(from 0deg, #3b82f6, #8b5cf6, #ec4899, #f43f5e, #f59e0b, #3b82f6); |
|
animation: rotate 20s linear infinite; |
|
} |
|
@keyframes rotate { |
|
from { background-position: 0% 0%; } |
|
to { background-position: 100% 100%; } |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-900 text-gray-100 min-h-screen"> |
|
<div class="container mx-auto px-4 py-8"> |
|
|
|
<header class="text-center mb-12"> |
|
<h1 class="text-5xl font-bold mb-4 bg-gradient-to-r from-blue-400 to-purple-600 bg-clip-text text-transparent"> |
|
General Relativity Made Simple |
|
</h1> |
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
|
Understanding Einstein's theory of gravity without the complex math |
|
</p> |
|
</header> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
|
<div class="lg:col-span-2 space-y-8"> |
|
|
|
<section class="bg-gray-800 rounded-xl p-6 shadow-lg"> |
|
<h2 class="text-3xl font-semibold mb-4 text-blue-400"> |
|
<i class="fas fa-atom mr-2"></i> What is General Relativity? |
|
</h2> |
|
<p class="mb-4 text-gray-300"> |
|
General Relativity is Einstein's theory of gravity that revolutionized our understanding of space, time, and the universe. It explains gravity not as a force, but as a curvature of spacetime caused by mass and energy. |
|
</p> |
|
<div class="flex flex-wrap gap-4 mt-6"> |
|
<div class="bg-blue-900/50 px-4 py-2 rounded-full flex items-center"> |
|
<i class="fas fa-ruler-combined mr-2 text-blue-300"></i> |
|
<span>Space tells matter how to move</span> |
|
</div> |
|
<div class="bg-purple-900/50 px-4 py-2 rounded-full flex items-center"> |
|
<i class="fas fa-weight-hanging mr-2 text-purple-300"></i> |
|
<span>Matter tells space how to curve</span> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="bg-gray-800 rounded-xl p-6 shadow-lg"> |
|
<h2 class="text-3xl font-semibold mb-4 text-purple-400"> |
|
<i class="fas fa-project-diagram mr-2"></i> Spacetime: The Fabric of the Universe |
|
</h2> |
|
<p class="mb-4 text-gray-300"> |
|
Imagine space and time are woven together into a 4-dimensional fabric called spacetime. Massive objects like stars and planets create "dents" in this fabric, and other objects move along these curves. |
|
</p> |
|
|
|
<div class="space-time h-64 rounded-lg mt-6 relative flex items-center justify-center"> |
|
<div class="gravity-well w-32 h-32" style="bottom: 50%; left: 50%; transform: translate(-50%, 50%);"></div> |
|
<div class="particle w-4 h-4" style="bottom: 30%; left: 30%;"></div> |
|
<div class="particle w-4 h-4" style="bottom: 40%; left: 60%;"></div> |
|
<div class="particle w-4 h-4" style="bottom: 70%; left: 20%;"></div> |
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
<div class="text-center px-4 py-2 bg-black/50 rounded-lg"> |
|
<p class="text-sm">Massive objects curve spacetime</p> |
|
<p class="text-xs opacity-70">Smaller objects follow the curvature</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
<div class="bg-gray-700/50 p-4 rounded-lg"> |
|
<h3 class="font-semibold text-blue-300 mb-2"><i class="fas fa-arrow-down mr-2"></i>Newton's View</h3> |
|
<p class="text-sm text-gray-300">Gravity is a force that pulls objects together instantly across space.</p> |
|
</div> |
|
<div class="bg-gray-700/50 p-4 rounded-lg"> |
|
<h3 class="font-semibold text-purple-300 mb-2"><i class="fas fa-project-diagram mr-2"></i>Einstein's View</h3> |
|
<p class="text-sm text-gray-300">Gravity is the curvature of spacetime caused by mass and energy.</p> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="bg-gray-800 rounded-xl p-6 shadow-lg"> |
|
<h2 class="text-3xl font-semibold mb-6 text-green-400"> |
|
<i class="fas fa-lightbulb mr-2"></i> Key Concepts Simplified |
|
</h2> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
|
<div class="concept-card bg-gray-700/50 rounded-lg overflow-hidden h-full"> |
|
<div class="concept-inner relative w-full h-full"> |
|
<div class="concept-front p-4"> |
|
<h3 class="font-bold text-xl mb-3 text-blue-300"> |
|
<i class="fas fa-ruler-combined mr-2"></i> Curved Spacetime |
|
</h3> |
|
<p class="text-gray-300 text-sm"> |
|
Massive objects like the Sun curve the spacetime around them. Planets orbit by following these curves, not because of a mysterious force. |
|
</p> |
|
<div class="mt-4 h-32 bg-gradient-to-br from-blue-900 to-blue-700 rounded flex items-center justify-center"> |
|
<i class="fas fa-circle text-yellow-400 text-4xl"></i> |
|
<div class="absolute w-48 h-48 border-2 border-blue-300 rounded-full opacity-30"></div> |
|
<div class="absolute w-32 h-32 border-2 border-blue-300 rounded-full opacity-50"></div> |
|
</div> |
|
</div> |
|
<div class="concept-back absolute inset-0 bg-blue-900/80 p-4 flex flex-col justify-center"> |
|
<h4 class="font-bold text-lg mb-2">Analogy</h4> |
|
<p class="text-sm">Like a bowling ball on a trampoline - it creates a dent that makes marbles roll around it.</p> |
|
<div class="mt-4 text-xs opacity-70"> |
|
<i class="fas fa-info-circle mr-1"></i> The heavier the object, the deeper the "dent" |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="concept-card bg-gray-700/50 rounded-lg overflow-hidden h-full"> |
|
<div class="concept-inner relative w-full h-full"> |
|
<div class="concept-front p-4"> |
|
<h3 class="font-bold text-xl mb-3 text-purple-300"> |
|
<i class="fas fa-clock mr-2"></i> Time Dilation |
|
</h3> |
|
<p class="text-gray-300 text-sm"> |
|
Time runs slower in stronger gravitational fields. Your head ages faster than your feet (by a tiny amount)! |
|
</p> |
|
<div class="mt-4 h-32 relative bg-gradient-to-br from-purple-900 to-purple-700 rounded flex items-center justify-center"> |
|
<div class="text-center"> |
|
<div class="text-2xl font-mono">00:00:00</div> |
|
<div class="text-xs opacity-70">Earth surface</div> |
|
</div> |
|
<div class="absolute right-4 top-4 text-center"> |
|
<div class="text-xl font-mono">00:00:01</div> |
|
<div class="text-xs opacity-70">Space</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="concept-back absolute inset-0 bg-purple-900/80 p-4 flex flex-col justify-center"> |
|
<h4 class="font-bold text-lg mb-2">GPS Needs Relativity</h4> |
|
<p class="text-sm">GPS satellites must account for time running faster in orbit (by 38 microseconds/day) or positions would be off by kilometers.</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="concept-card bg-gray-700/50 rounded-lg overflow-hidden h-full"> |
|
<div class="concept-inner relative w-full h-full"> |
|
<div class="concept-front p-4"> |
|
<h3 class="font-bold text-xl mb-3 text-green-300"> |
|
<i class="fas fa-spinner mr-2"></i> Frame Dragging |
|
</h3> |
|
<p class="text-gray-300 text-sm"> |
|
Rotating masses like Earth actually "drag" spacetime around with them, like stirring honey with a spoon. |
|
</p> |
|
<div class="mt-4 h-32 bg-gradient-to-br from-green-900 to-green-700 rounded flex items-center justify-center"> |
|
<i class="fas fa-globe-americas text-white text-4xl animate-spin"></i> |
|
<div class="absolute w-48 h-48 border-2 border-green-300 rounded-full opacity-30 animate-spin"></div> |
|
</div> |
|
</div> |
|
<div class="concept-back absolute inset-0 bg-green-900/80 p-4 flex flex-col justify-center"> |
|
<h4 class="font-bold text-lg mb-2">Gravity Probe B</h4> |
|
<p class="text-sm">This NASA experiment confirmed frame dragging by measuring how Earth's rotation twists spacetime around it.</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="concept-card bg-gray-700/50 rounded-lg overflow-hidden h-full"> |
|
<div class="concept-inner relative w-full h-full"> |
|
<div class="concept-front p-4"> |
|
<h3 class="font-bold text-xl mb-3 text-yellow-300"> |
|
<i class="fas fa-expand mr-2"></i> Expanding Universe |
|
</h3> |
|
<p class="text-gray-300 text-sm"> |
|
General Relativity predicts the expansion of space itself, leading to our modern understanding of the Big Bang. |
|
</p> |
|
<div class="mt-4 h-32 bg-gradient-to-br from-yellow-900 to-yellow-700 rounded flex items-center justify-center"> |
|
<div class="flex space-x-1"> |
|
<div class="w-3 h-3 bg-white rounded-full"></div> |
|
<div class="w-3 h-3 bg-white rounded-full"></div> |
|
<div class="w-3 h-3 bg-white rounded-full"></div> |
|
</div> |
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
<div class="w-full h-full animate-pulse"></div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="concept-back absolute inset-0 bg-yellow-900/80 p-4 flex flex-col justify-center"> |
|
<h4 class="font-bold text-lg mb-2">Dark Energy</h4> |
|
<p class="text-sm">The mysterious force accelerating the expansion of the universe is one of GR's biggest puzzles.</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="bg-gray-800 rounded-xl p-6 shadow-lg"> |
|
<h2 class="text-3xl font-semibold mb-6 text-red-400"> |
|
<i class="fas fa-square-root-alt mr-2"></i> The Math Behind It (Simplified) |
|
</h2> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
|
<div class="equation-box p-4 border border-gray-700 rounded-lg"> |
|
<h3 class="font-bold text-lg mb-3 text-red-300"> |
|
Einstein's Field Equations |
|
</h3> |
|
<div class="text-center my-4 text-2xl font-math"> |
|
G<sub>μν</sub> = 8πG/c<sup>4</sup> T<sub>μν</sub> |
|
</div> |
|
<p class="text-sm text-gray-300"> |
|
This is the core equation of General Relativity. It relates the curvature of spacetime (left side) to the matter and energy content (right side). |
|
</p> |
|
<div class="mt-4 grid grid-cols-2 gap-2 text-xs"> |
|
<div class="bg-gray-700/50 p-2 rounded"> |
|
<span class="font-bold text-red-300">G<sub>μν</sub></span> |
|
<p>Curvature of spacetime</p> |
|
</div> |
|
<div class="bg-gray-700/50 p-2 rounded"> |
|
<span class="font-bold text-blue-300">T<sub>μν</sub></span> |
|
<p>Matter/energy content</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="equation-box p-4 border border-gray-700 rounded-lg"> |
|
<h3 class="font-bold text-lg mb-3 text-purple-300"> |
|
Tensors Made Simple |
|
</h3> |
|
<div class="tensor-visualization h-24 rounded-lg mb-4 flex items-center justify-center"> |
|
<div class="bg-black/70 px-4 py-2 rounded"> |
|
<span class="font-mono">Multi-dimensional arrays</span> |
|
</div> |
|
</div> |
|
<p class="text-sm text-gray-300"> |
|
Tensors are mathematical objects that generalize numbers, vectors, and matrices. In GR, they describe curvature and energy in all spacetime directions. |
|
</p> |
|
<div class="mt-3 flex space-x-2 text-xs"> |
|
<div class="bg-purple-900/50 px-2 py-1 rounded">Scalar (0D)</div> |
|
<div class="bg-blue-900/50 px-2 py-1 rounded">Vector (1D)</div> |
|
<div class="bg-green-900/50 px-2 py-1 rounded">Matrix (2D)</div> |
|
<div class="bg-red-900/50 px-2 py-1 rounded">Tensor (nD)</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-6 bg-gray-700/50 p-4 rounded-lg"> |
|
<h3 class="font-bold text-lg mb-3 text-yellow-300"> |
|
<i class="fas fa-brain mr-2"></i> Intuitive Understanding |
|
</h3> |
|
<p class="text-sm text-gray-300 mb-4"> |
|
You don't need to solve these equations to grasp the key ideas. Think of spacetime as a flexible rubber sheet: |
|
</p> |
|
<div class="flex items-start"> |
|
<div class="mr-4 text-yellow-300 text-2xl"> |
|
<i class="fas fa-arrow-right"></i> |
|
</div> |
|
<div> |
|
<p class="text-sm"> |
|
<span class="font-bold">More mass</span> → <span class="text-blue-300">Deeper curvature</span> → <span class="text-purple-300">Stronger "gravity"</span> |
|
</p> |
|
<p class="text-sm mt-2"> |
|
<span class="font-bold">Faster motion</span> → <span class="text-green-300">More time dilation</span> → <span class="text-red-300">Clocks run slower</span> |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
</div> |
|
|
|
|
|
<div class="space-y-8"> |
|
|
|
<section class="bg-gray-800 rounded-xl p-6 shadow-lg"> |
|
<h2 class="text-2xl font-semibold mb-4 text-blue-400"> |
|
<i class="fas fa-gamepad mr-2"></i> Gravity Simulator |
|
</h2> |
|
<div class="space-time h-64 rounded-lg relative" id="gravityCanvas"> |
|
<div class="gravity-well w-20 h-20 absolute" id="centralMass" style="bottom: 50%; left: 50%; transform: translate(-50%, 50%);"></div> |
|
<div class="particle w-3 h-3 absolute" id="orbitingObject" style="bottom: 30%; left: 50%; transform: translate(-50%, 50%);"></div> |
|
<div class="absolute bottom-4 left-0 right-0 flex justify-center"> |
|
<button id="startOrbit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg text-sm"> |
|
<i class="fas fa-play mr-1"></i> Start Orbit |
|
</button> |
|
</div> |
|
</div> |
|
<div class="mt-4 grid grid-cols-2 gap-2"> |
|
<div> |
|
<label class="text-xs block mb-1">Mass Size</label> |
|
<input type="range" id="massSize" min="10" max="50" value="20" class="w-full"> |
|
</div> |
|
<div> |
|
<label class="text-xs block mb-1">Orbit Speed</label> |
|
<input type="range" id="orbitSpeed" min="1" max="10" value="5" class="w-full"> |
|
</div> |
|
</div> |
|
<div class="mt-4 text-xs text-gray-400"> |
|
<i class="fas fa-info-circle mr-1"></i> Adjust sliders to see how mass and speed affect the orbit |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="bg-gray-800 rounded-xl p-6 shadow-lg"> |
|
<h2 class="text-2xl font-semibold mb-4 text-purple-400"> |
|
<i class="fas fa-clock mr-2"></i> Time Dilation Calculator |
|
</h2> |
|
<div class="mb-4"> |
|
<label class="block text-sm mb-1">Gravitational Field Strength</label> |
|
<select id="gravityField" class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-sm"> |
|
<option value="earth">Earth Surface (1g)</option> |
|
<option value="sun">Sun Surface (28g)</option> |
|
<option value="neutron">Neutron Star (10^11g)</option> |
|
<option value="blackhole">Black Hole (∞)</option> |
|
</select> |
|
</div> |
|
<div class="mb-4"> |
|
<label class="block text-sm mb-1">Time Duration</label> |
|
<div class="flex"> |
|
<input type="number" id="timeInput" value="1" class="flex-1 bg-gray-700 border border-gray-600 rounded-l px-3 py-2 text-sm"> |
|
<select id="timeUnit" class="bg-gray-700 border border-gray-600 rounded-r px-3 py-2 text-sm"> |
|
<option value="seconds">Seconds</option> |
|
<option value="minutes">Minutes</option> |
|
<option value="hours">Hours</option> |
|
<option value="days">Days</option> |
|
<option value="years">Years</option> |
|
</select> |
|
</div> |
|
</div> |
|
<button id="calculateDilation" class="w-full bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg text-sm mb-4"> |
|
<i class="fas fa-calculator mr-1"></i> Calculate Time Difference |
|
</button> |
|
<div id="dilationResult" class="hidden bg-gray-700/50 p-3 rounded-lg text-sm"> |
|
<div class="flex justify-between mb-2"> |
|
<span>Local Time:</span> |
|
<span id="localTime" class="font-mono">1.00 sec</span> |
|
</div> |
|
<div class="flex justify-between"> |
|
<span>Distant Observer:</span> |
|
<span id="observerTime" class="font-mono">1.00 sec</span> |
|
</div> |
|
<div class="mt-2 text-xs text-gray-400"> |
|
<i class="fas fa-info-circle mr-1"></i> Time runs slower in stronger gravity |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="bg-gray-800 rounded-xl p-6 shadow-lg"> |
|
<h2 class="text-2xl font-semibold mb-4 text-green-400"> |
|
<i class="fas fa-check-circle mr-2"></i> GR Predictions |
|
</h2> |
|
<div class="space-y-4"> |
|
<div class="flex items-start"> |
|
<div class="bg-green-900/50 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0"> |
|
<i class="fas fa-check text-xs"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-semibold">Gravitational Lensing</h3> |
|
<p class="text-xs text-gray-400">Light bends around massive objects, creating multiple images of distant galaxies.</p> |
|
</div> |
|
</div> |
|
<div class="flex items-start"> |
|
<div class="bg-green-900/50 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0"> |
|
<i class="fas fa-check text-xs"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-semibold">Black Holes</h3> |
|
<p class="text-xs text-gray-400">Regions where spacetime curvature becomes infinite - first image captured in 2019.</p> |
|
</div> |
|
</div> |
|
<div class="flex items-start"> |
|
<div class="bg-green-900/50 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0"> |
|
<i class="fas fa-check text-xs"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-semibold">Gravitational Waves</h3> |
|
<p class="text-xs text-gray-400">Ripples in spacetime detected in 2015 from colliding black holes.</p> |
|
</div> |
|
</div> |
|
<div class="flex items-start"> |
|
<div class="bg-green-900/50 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0"> |
|
<i class="fas fa-check text-xs"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-semibold">Mercury's Orbit</h3> |
|
<p class="text-xs text-gray-400">Explained the precession of Mercury's orbit that Newton couldn't.</p> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="bg-gray-800 rounded-xl p-6 shadow-lg"> |
|
<h2 class="text-2xl font-semibold mb-4 text-yellow-400"> |
|
<i class="fas fa-book-open mr-2"></i> Learn More |
|
</h2> |
|
<div class="space-y-3"> |
|
<a href="#" class="flex items-center p-3 bg-gray-700/50 hover:bg-gray-700 rounded-lg transition"> |
|
<div class="bg-blue-900/50 p-2 rounded-lg mr-3"> |
|
<i class="fas fa-video"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-medium">Video Explanations</h3> |
|
<p class="text-xs text-gray-400">Visual guides to GR concepts</p> |
|
</div> |
|
</a> |
|
<a href="#" class="flex items-center p-3 bg-gray-700/50 hover:bg-gray-700 rounded-lg transition"> |
|
<div class="bg-purple-900/50 p-2 rounded-lg mr-3"> |
|
<i class="fas fa-book"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-medium">Beginner Books</h3> |
|
<p class="text-xs text-gray-400">GR without heavy math</p> |
|
</div> |
|
</a> |
|
<a href="#" class="flex items-center p-3 bg-gray-700/50 hover:bg-gray-700 rounded-lg transition"> |
|
<div class="bg-green-900/50 p-2 rounded-lg mr-3"> |
|
<i class="fas fa-graduation-cap"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-medium">Online Courses</h3> |
|
<p class="text-xs text-gray-400">Step-by-step learning</p> |
|
</div> |
|
</a> |
|
</div> |
|
</section> |
|
</div> |
|
</div> |
|
|
|
|
|
<footer class="mt-16 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm"> |
|
<p>General Relativity Explained Simply - A visualization tool for understanding Einstein's theory</p> |
|
<p class="mt-2">© 2023 Science Education Project</p> |
|
</footer> |
|
</div> |
|
|
|
<script> |
|
|
|
document.getElementById('startOrbit').addEventListener('click', function() { |
|
const orbitingObject = document.getElementById('orbitingObject'); |
|
const massSize = parseInt(document.getElementById('massSize').value); |
|
const speed = parseInt(document.getElementById('orbitSpeed').value); |
|
const centralMass = document.getElementById('centralMass'); |
|
|
|
|
|
centralMass.style.width = `${massSize}px`; |
|
centralMass.style.height = `${massSize}px`; |
|
|
|
|
|
orbitingObject.style.transition = 'none'; |
|
orbitingObject.style.left = '50%'; |
|
orbitingObject.style.bottom = '30%'; |
|
orbitingObject.style.transform = 'translate(-50%, 50%)'; |
|
|
|
|
|
const orbitRadius = 80; |
|
const centerX = 50; |
|
const centerY = 30; |
|
let angle = 0; |
|
|
|
|
|
function animateOrbit() { |
|
angle += 0.02 * speed; |
|
const x = centerX + orbitRadius * Math.cos(angle); |
|
const y = centerY + orbitRadius * Math.sin(angle); |
|
|
|
orbitingObject.style.left = `${x}%`; |
|
orbitingObject.style.bottom = `${y}%`; |
|
|
|
|
|
animationId = requestAnimationFrame(animateOrbit); |
|
} |
|
|
|
|
|
let animationId = requestAnimationFrame(animateOrbit); |
|
|
|
|
|
this.disabled = true; |
|
this.innerHTML = '<i class="fas fa-sync-alt mr-1"></i> Orbiting'; |
|
|
|
|
|
setTimeout(() => { |
|
this.disabled = false; |
|
this.innerHTML = '<i class="fas fa-redo mr-1"></i> Restart'; |
|
}, 2000); |
|
}); |
|
|
|
|
|
document.getElementById('massSize').addEventListener('input', function() { |
|
const size = this.value; |
|
document.getElementById('centralMass').style.width = `${size}px`; |
|
document.getElementById('centralMass').style.height = `${size}px`; |
|
}); |
|
|
|
|
|
document.getElementById('calculateDilation').addEventListener('click', function() { |
|
const field = document.getElementById('gravityField').value; |
|
const time = parseFloat(document.getElementById('timeInput').value); |
|
const unit = document.getElementById('timeUnit').value; |
|
|
|
|
|
let timeInSeconds = time; |
|
switch(unit) { |
|
case 'minutes': timeInSeconds *= 60; break; |
|
case 'hours': timeInSeconds *= 3600; break; |
|
case 'days': timeInSeconds *= 86400; break; |
|
case 'years': timeInSeconds *= 31536000; break; |
|
} |
|
|
|
|
|
let dilationFactor = 1; |
|
switch(field) { |
|
case 'earth': dilationFactor = 1.0000000007; break; |
|
case 'sun': dilationFactor = 1.00002; break; |
|
case 'neutron': dilationFactor = 1.5; break; |
|
case 'blackhole': dilationFactor = Infinity; break; |
|
} |
|
|
|
const observerTime = field === 'blackhole' ? '∞' : (timeInSeconds / dilationFactor).toFixed(6); |
|
|
|
document.getElementById('localTime').textContent = `${timeInSeconds.toFixed(2)} sec`; |
|
document.getElementById('observerTime').textContent = `${observerTime} sec`; |
|
document.getElementById('dilationResult').classList.remove('hidden'); |
|
}); |
|
</script> |
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=smjain/gr" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
|
</html> |
