Update file random.html

wiki/pages/random.html

@@ -31,6 +31,28 @@
       background-position: 90% center;
       background-repeat: no-repeat;
     }
+
+    .section {
+            height: 100vh; /* Full viewport height */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 2em;
+            transition: background-color 0.5s ease; /* Smooth transition */
+        }
+        #section1 {
+            background-image: url('https://static.igem.wiki/teams/5187/ran-1.jpg');
+            background-attachment: fixed;
+            background-size: cover;
+            background-position: 90% center;
+            background-repeat: no-repeat;
+        }
+        #section2 {
+            background-color: lightcoral;
+        }
+        #section3 {
+            background-color: lightgreen;
+        }
     
     .content-wrapper {
       display: flex;
@@ -157,6 +179,11 @@
       <p>Everyone gets sick from time to time, often returning to their normal routines within days. But what if you're an IBD patient? Can life ever truly feel normal again? While IBD may not be fatal, it can gradually consume every facet of your existence. With constant hospital visits, unpredictable cramps, and the toll of immune attacks, you find yourself living—but not truly alive.</p>
     </div>
 
+    <div class="section" id="section1">Section 1</div>
+    <div class="section" id="section2">Section 2</div>
+    <div class="section" id="section3">Section 3</div>
+
+
     <div class="card-container">
       <div class="card">
         <div class="card-content">
@@ -223,6 +250,18 @@
         this.classList.toggle('expanded');
       });
     });
+
+    window.addEventListener('scroll', () => {
+            const sections = document.querySelectorAll('.section');
+            let scrollPosition = window.scrollY; // Current scroll position
+
+            sections.forEach((section) => {
+                if (scrollPosition >= section.offsetTop && scrollPosition < section.offsetTop + section.offsetHeight) {
+                    // Change the body's background color based on the current section
+                    document.body.style.backgroundColor = getComputedStyle(section).backgroundColor;
+                }
+            });
+          })
   </script>
 </body>
 </html>
\ No newline at end of file