From b529cf2822c2b5e2b608fada27cfb0f18c4493b5 Mon Sep 17 00:00:00 2001
From: yakshit savaliya <yakshitsavaliya@gmail.com>
Date: Thu, 31 Oct 2024 22:34:49 +0530
Subject: [PATCH] Update index.html

1. Added a rotating shadow overlay for a realistic lighting effect on the earth.
2. Introduced a day-night cycle animation to simulate light movement across the globe.
---
 3D Earth/index.html | 38 ++++++++++++++++++++++++--------------
 1 file changed, 24 insertions(+), 14 deletions(-)
diff --git a/3D Earth/index.html b/3D Earth/index.html
index 2ce2f28d..353da9e6 100644
--- a/3D Earth/index.html	
+++ b/3D Earth/index.html	
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Correct 3D Animated Spherical Earth</title>
+    <title>Animated 3D Earth</title>
     <style>
         body {
             margin: 0;
@@ -31,7 +31,8 @@
             position: absolute;
             transform-style: preserve-3d;
             background: url('https://eoimages.gsfc.nasa.gov/images/imagerecords/57000/57735/land_ocean_ice_cloud_2048.jpg');
-            background-size: 200%;
+            background-size: cover;
+            overflow: hidden;
         }
 
         .globe::before {
@@ -42,33 +43,42 @@
             width: 100%;
             height: 100%;
             border-radius: 50%;
-            background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.4) 80%);
+            background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.6) 70%);
+            animation: dayNightCycle 20s linear infinite;
         }
 
-        .hemisphere {
+        .globe::after {
+            content: '';
             position: absolute;
             width: 100%;
             height: 100%;
             border-radius: 50%;
-            overflow: hidden;
-            transform-style: preserve-3d;
+            background: radial-gradient(circle at 60% 40%, rgba(255,255,255,0.1), rgba(0,0,0,0.6));
+            mix-blend-mode: overlay;
+            opacity: 0.5;
+            animation: shadowMovement 20s linear infinite;
         }
 
-        .front { transform: translateZ(1px); }
-        .back { transform: rotateY(180deg) translateZ(1px); }
-
         @keyframes rotate {
             0% { transform: rotateY(0deg); }
             100% { transform: rotateY(360deg); }
         }
+
+        @keyframes dayNightCycle {
+            0% { background-position: 0 0; }
+            100% { background-position: 100% 100%; }
+        }
+
+        @keyframes shadowMovement {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
     </style>
 </head>
 <body>
     <div class="scene">
-        <div class="globe">
-            <div class="hemisphere front"></div>
-            <div class="hemisphere back"></div>
-        </div>
+        <div class="globe"></div>
     </div>
 </body>
-</html>
\ No newline at end of file
+</html>
+
