diff --git a/apps/Trappist/light gray background.png b/apps/Trappist/light gray background.png
new file mode 100644
index 0000000..7b7b68b
Binary files /dev/null and b/apps/Trappist/light gray background.png differ
diff --git a/apps/Trappist/trappist with gray background.html b/apps/Trappist/trappist with gray background.html
new file mode 100644
index 0000000..e976d31
--- /dev/null
+++ b/apps/Trappist/trappist with gray background.html	
@@ -0,0 +1,296 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>TRAPPIST-1 Simulation</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden; /* Prevent scrolling on the entire page */
+        }
+        canvas { display: block; }
+        #infoPanel {
+            position: absolute;
+            top: 50px; /* Adjust the top position so it's below the About button */
+            right: 10px;
+            background-color: rgba(255, 255, 255, 0.8);
+            border: 1px solid #ddd;
+            padding: 10px;
+            font-family: Arial, sans-serif;
+            font-size: 14px;
+            color: #333;
+            max-width: 200px;
+        }
+        #aboutBtn {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            z-index: 2; /* Higher z-index to ensure it's clickable */
+        }
+        /* The Modal (background) */
+        .modal {
+            display: none; /* Hidden by default */
+            position: fixed; /* Stay in place */
+            z-index: 2; /* Sit on top */
+            left: 0;
+            top: 0;
+            width: 100%; /* Full width */
+            height: 100%; /* Full height */
+            overflow: auto; /* Enable scroll if needed */
+            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+        }
+        
+        /* Modal Content */
+        .modal-content {
+            background-color: #fefefe;
+            margin: 15% auto; /* 15% from the top and centered */
+            padding: 20px;
+            border: 1px solid #888;
+            width: 80%; /* Could be more or less, depending on screen size */
+        }
+        
+        /* The Close Button */
+        .close {
+            color: #aaa;
+            float: right;
+            font-size: 28px;
+            font-weight: bold;
+        }
+        
+        .close:hover,
+        .close:focus {
+            color: black;
+            text-decoration: none;
+            cursor: pointer;
+        }
+
+    </style>
+</head>
+<body>
+    <button id="aboutBtn">About</button>
+
+    <div id="aboutModal" class="modal">
+     <div class="modal-content">
+        <span class="close">&times;</span>
+        <h2>About the TRAPPIST-1 Simulation</h2>
+        <p>This simulation showcases the TRAPPIST-1 planetary system, featuring seven Earth-sized exoplanets in orbit around a ultra-cool dwarf star. The distances and sizes are scaled for visualization. Note: The orbits are simplified and not to scale.</p>
+        <p>Click on a planet to learn more. Try Trappist 1e. This app was created by <a href="https://toontalk.github.io/AI/apps/Trappist/ChatGPT.pdf" target="_blank">conversing with ChatGPT 4</a>.</p>
+        
+        <h3>How to Interact:</h3>
+        <ul>
+            <li><strong>Rotate:</strong> Click and drag with the left mouse button.</li>
+            <li><strong>Zoom:</strong> Scroll up or down with the mouse wheel.</li>
+            <li><strong>Pan:</strong> Click and drag with the right mouse button, or hold down the Ctrl key while clicking and dragging with the left mouse button.</li>
+        </ul>
+    </div>
+    </div>
+
+    <div id="infoPanel" style="position: absolute; top: 10px; left: 10px; background-color: rgba(255,255,255,0.8); border: 1px solid #ccc; padding: 10px; display: none;">
+      Click on a planet to see information here.
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
+    <script>
+        // Set up the scene, camera, and renderer
+        var scene = new THREE.Scene();
+        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
+        var renderer = new THREE.WebGLRenderer();
+        renderer.setClearColor(0xeeeeee, 1); // Set background to very light gray
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        document.body.appendChild(renderer.domElement);
+
+         // Add the star (TRAPPIST-1, an ultra-cool red dwarf star)
+        var starGeometry = new THREE.SphereGeometry(0.5, 32, 32);
+        var starMaterial = new THREE.MeshBasicMaterial({ color: 0xff3333 }); // Deep red color
+        var star = new THREE.Mesh(starGeometry, starMaterial);
+        scene.add(star);
+
+        // Add light to represent the star's light (with a reddish hue)
+        var light = new THREE.PointLight(0xff3333, 1, 100); // Reddish light to mimic the red dwarf star
+        light.position.set(0, 0, 0);
+        scene.add(light);
+
+        // Function to calculate scaled orbital speed based on orbital period
+        function calculateOrbitalSpeed(orbitalPeriodDays) {
+            const fullCircle = 2 * Math.PI; // Full orbit in radians
+            return fullCircle / (orbitalPeriodDays * 24 * 60 * 60); // Convert days to seconds
+        }
+        
+        // Example scale factors
+        const AU_to_pixels = 100; // 1 AU is represented as 100 pixels on the screen
+        const R_earth_to_pixels = 0.1; // 1 Earth radius is represented as 0.1 pixels
+        
+        // Scaled data for the TRAPPIST-1 planets
+        var planetData = [
+            // TRAPPIST-1b
+            {
+                size: 1.12 * R_earth_to_pixels,
+                distance: 0.0115 * AU_to_pixels,
+                orbitalSpeed: calculateOrbitalSpeed(1.51),
+                orbitalPeriod: 1.51
+            },
+            // TRAPPIST-1c
+            {
+                size: 1.10 * R_earth_to_pixels,
+                distance: 0.0158 * AU_to_pixels,
+                orbitalSpeed: calculateOrbitalSpeed(2.42),
+                orbitalPeriod: 2.42
+            },
+            // TRAPPIST-1d
+            {
+                size: 0.79 * R_earth_to_pixels,
+                distance: 0.0223 * AU_to_pixels,
+                orbitalSpeed: calculateOrbitalSpeed(4.05),
+                orbitalPeriod: 4.05
+            },
+            // TRAPPIST-1e
+            {
+                size: 0.92 * R_earth_to_pixels,
+                distance: 0.0293 * AU_to_pixels,
+                orbitalSpeed: calculateOrbitalSpeed(6.10),
+                orbitalPeriod: 6.10
+            },
+            // TRAPPIST-1f
+            {
+                size: 1.05 * R_earth_to_pixels,
+                distance: 0.0385 * AU_to_pixels,
+                orbitalSpeed: calculateOrbitalSpeed(9.21),
+                orbitalPeriod: 9.21
+            },
+            // TRAPPIST-1g
+            {
+                size: 1.13 * R_earth_to_pixels,
+                distance: 0.0469 * AU_to_pixels,
+                orbitalSpeed: calculateOrbitalSpeed(12.35),
+                orbitalPeriod: 12.35
+            },
+            // TRAPPIST-1h
+            {
+                size: 0.76 * R_earth_to_pixels,
+                distance: 0.0619 * AU_to_pixels,
+                orbitalSpeed: calculateOrbitalSpeed(18.77),
+                orbitalPeriod: 18.77
+            },
+        ];
+
+        // Create planets and add them to the scene
+        var planets = [];
+        for (var i = 0; i < planetData.length; i++) {
+            var data = planetData[i];
+            var geometry = new THREE.SphereGeometry(data.size, 32, 32);
+            var material = new THREE.MeshLambertMaterial({color: 0x888888}); // Placeholder color
+            var planet = new THREE.Mesh(geometry, material);
+            planet.position.x = data.distance; // Position the planet at the correct distance
+            scene.add(planet);
+            planets.push(planet);
+        }
+
+        // Add light to represent the star's light
+        var light = new THREE.PointLight(0xffffff, 1, 100);
+        light.position.set(0, 0, 0);
+        scene.add(light);
+
+        // Set the camera back so we can view the objects
+        camera.position.z = 5;
+
+        // Create a render loop to animate the planets
+        var animate = function () {
+            requestAnimationFrame(animate);
+            
+            var now = Date.now() / 1000; // Get the current time in seconds
+            
+            for (var i = 0; i < planets.length; i++) {
+                var planet = planets[i];
+                var data = planetData[i];
+                var angle = now * data.orbitalSpeed * 10000;
+                planet.position.x = data.distance * Math.cos(angle);
+                planet.position.z = data.distance * Math.sin(angle);
+                // Optional: rotate the planet for added realism
+                planet.rotation.y += 0.005;
+            }
+        
+            renderer.render(scene, camera);
+        };
+        
+        // Record the start time of the simulation
+        var startTime = Date.now();
+
+        var mouse = new THREE.Vector2();
+        var raycaster = new THREE.Raycaster();
+        
+        function onMouseClick(event) {
+            event.preventDefault();
+        
+            mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
+            mouse.y = - (event.clientY / renderer.domElement.clientHeight) * 2 + 1;
+        
+            raycaster.setFromCamera(mouse, camera);
+        
+            var intersects = raycaster.intersectObjects(planets, true);
+        
+            if (intersects.length > 0) {
+                var intersectedPlanet = intersects[0].object;
+                var index = planets.indexOf(intersectedPlanet);
+                var data = planetData[index];
+                showInfo(data, index); // Call the showInfo function with the correct arguments
+            }
+        }
+        
+        function showInfo(data, index) {
+            var infoPanel = document.getElementById('infoPanel');
+        
+            var content = '<strong>Planet Details</strong><br>' +
+                          'Name: TRAPPIST-1 ' + String.fromCharCode('b'.charCodeAt(0) + index) + '<br>' +
+                          'Orbital Period: ' + data.orbitalPeriod.toFixed(2) + ' days<br>' +
+                          'Distance from Star: ' + (data.distance / AU_to_pixels).toFixed(3) + ' AU<br>' +
+                          'Radius: ' + (data.size / R_earth_to_pixels).toFixed(2) + ' Earth radii<br>';
+        
+            // Check if the clicked planet is TRAPPIST-1e (assuming it's the fourth planet)
+            if (index === 3) {
+                content += '<img src="TRAPPIST-1e_LEO_12x18.jpg" alt="TRAPPIST-1e Poster" style="width: 100%; height: auto;">';
+            }
+        
+            infoPanel.innerHTML = content;
+            infoPanel.style.display = 'block';
+        }
+        
+        window.addEventListener('click', onMouseClick, false);
+
+        // Start the animation
+        animate();
+        
+        // Get the modal
+        var modal = document.getElementById("aboutModal");
+        
+        // Get the button that opens the modal
+        var btn = document.getElementById("aboutBtn");
+        
+        // Get the <span> element that closes the modal
+        var span = document.getElementsByClassName("close")[0];
+        
+        // When the user clicks the button, open the modal 
+        btn.onclick = function() {
+            modal.style.display = "block";
+        }
+        
+        // When the user clicks on <span> (x), close the modal
+        span.onclick = function() {
+            modal.style.display = "none";
+        }
+        
+        // When the user clicks anywhere outside of the modal, close it
+        window.onclick = function(event) {
+            if (event.target == modal) {
+                modal.style.display = "none";
+            }
+        }
+            
+        var controls = new THREE.OrbitControls(camera, renderer.domElement);
+        
+        // Optional: Configure the controls
+        controls.minDistance = 1; // Minimum zoom distance
+        controls.maxDistance = 500; // Maximum zoom distance
+
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/apps/Trappist/white Gemini_Generated_Image_8l6grr8l6grr8l6g.png b/apps/Trappist/white Gemini_Generated_Image_8l6grr8l6grr8l6g.png
new file mode 100644
index 0000000..2d87521
Binary files /dev/null and b/apps/Trappist/white Gemini_Generated_Image_8l6grr8l6grr8l6g.png differ
