File size: 35,153 Bytes
558f5af 85e7bb9 558f5af 85e7bb9 558f5af 85e7bb9 558f5af 85e7bb9 558f5af 85e7bb9 558f5af 85e7bb9 558f5af 85e7bb9 558f5af 85e7bb9 558f5af 85e7bb9 558f5af 85e7bb9 558f5af 85e7bb9 558f5af 85e7bb9 558f5af |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 |
<!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 -->
<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>
<!-- Main Content -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Left Column - Core Concepts -->
<div class="lg:col-span-2 space-y-8">
<!-- Introduction -->
<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>
<!-- Spacetime Visualization -->
<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>
<!-- Key Concepts -->
<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">
<!-- Concept 1 -->
<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>
<!-- Concept 2 -->
<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>
<!-- Concept 3 -->
<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>
<!-- Concept 4 -->
<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>
<!-- Simplified Math -->
<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">
<!-- Einstein's Equation -->
<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>
<!-- Tensors Simplified -->
<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>
<!-- Right Column - Interactive Elements -->
<div class="space-y-8">
<!-- Gravity Simulator -->
<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>
<!-- Time Dilation Calculator -->
<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>
<!-- GR Predictions -->
<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>
<!-- Learn More -->
<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 -->
<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>
// Gravity Simulator Animation
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');
// Update central mass size
centralMass.style.width = `${massSize}px`;
centralMass.style.height = `${massSize}px`;
// Reset position
orbitingObject.style.transition = 'none';
orbitingObject.style.left = '50%';
orbitingObject.style.bottom = '30%';
orbitingObject.style.transform = 'translate(-50%, 50%)';
// Orbit parameters
const orbitRadius = 80; // pixels
const centerX = 50; // percentage
const centerY = 30; // percentage
let angle = 0;
// Start animation
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}%`;
// Continue animation
animationId = requestAnimationFrame(animateOrbit);
}
// Start the animation
let animationId = requestAnimationFrame(animateOrbit);
// Update button state
this.disabled = true;
this.innerHTML = '<i class="fas fa-sync-alt mr-1"></i> Orbiting';
// Allow restart by clicking again (though it will create multiple animations)
setTimeout(() => {
this.disabled = false;
this.innerHTML = '<i class="fas fa-redo mr-1"></i> Restart';
}, 2000);
});
// Update mass size display
document.getElementById('massSize').addEventListener('input', function() {
const size = this.value;
document.getElementById('centralMass').style.width = `${size}px`;
document.getElementById('centralMass').style.height = `${size}px`;
});
// Time Dilation Calculator
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;
// Convert to seconds for calculation
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;
}
// Simple dilation factors (not precise, for demonstration)
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> |