From 8770bfb0934d1c6c6a0630d46cbfde57c229f5c9 Mon Sep 17 00:00:00 2001
From: Martin Sandford <33297343+fr3qu3ncy@users.noreply.github.com>
Date: Sun, 15 Dec 2024 22:34:09 +0000
Subject: [PATCH] Adding Image 2024-12-15-news.html - 2766

---
 2024-12-15-news.html | 127 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 127 insertions(+)
 create mode 100644 2024-12-15-news.html
diff --git a/2024-12-15-news.html b/2024-12-15-news.html
new file mode 100644
index 0000000..e2bb1d7
--- /dev/null
+++ b/2024-12-15-news.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Three.js 3D Globe with Dramatic Lighting</title>
+    <!-- Google Open Sans Font -->
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        body { margin: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Open Sans', sans-serif; background-color: #000; color: #fff;}
+        canvas { display: flex; margin-right: 0px; height: 90vh; } /* Reduced height to 40vh */
+        .content {
+            width: 100%;
+            padding: 5px;
+            box-sizing: border-box;
+            background: linear-gradient(rgba(000,000,000,0.7), rgba(000,000,000,0.7));
+            opacity: 1;
+            color: #fff;
+            a {
+                color: white;
+            }
+        }
+        h1 {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        .backgroundDiv {
+            background: linear-gradient(rgba(000,000,000,0.8), rgba(000,000,000,0.8)), url('images/2024-12-15-news.png') no-repeat center;
+            opacity: 1;
+            width: 100%;
+            height: 100%;
+        }
+        .transDiv {
+            opacity: 1;
+        }
+        .newsText {
+            font-size: small;
+            padding: 5px;
+            background: linear-gradient(rgba(000,000,000,0.5), rgba(000,000,000,0.5));
+            opacity: 1;
+            text-align: center;
+        }
+        .hideDiv {
+            display: none;
+            font-size: x-small;
+            text-align: center;
+        }
+        .newsText:hover + .hideDiv {
+            display: flex;
+            padding: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="backgroundDiv">
+        <div class="content">
+            <h1>2024-12-15</h1>
+        </div>
+        <div class="content">
+            <!-- back - link to go to index.html-->
+            <a href="index.html">Back</a>
+        </div>
+        <div class="newsText">
+            <p>Here is a one-sentence summary of the news headlines:</br></br>Reports have emerged on the BBC website of several major news stories, including a devastating cyclone on Mayotte island, the takeover of Royal Mail by a Czech billionaire, and various other incidents involving accidents, crimes, and celebrity mishaps.</p>
+        </div>
+        <div class="hideDiv">
+            <p><i> A dramatic and intense image of Mayotte island with a powerful cyclone raging above, its dark clouds swirling with debris and destruction below. In the foreground, a distraught woman holds a photo of her loved one, amidst the chaos caused by the storm. The background is blurred with remnants of destroyed homes and buildings, while in the distance, two Russian oil tankers lie wrecked on the Black Sea shore. </i></p>
+        </div>
+        <div id="CanvasDiv" class="transDiv">
+        </div>
+    </div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+
+<script>
+// Scene setup
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(75, (window.innerWidth - 50) / (0.65 * window.innerHeight), 0.1, 1000); // Updated aspect ratio
+const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+renderer.setSize(window.innerWidth - 10, 0.7 * window.innerHeight); // Reduced height to 40% of the viewport height
+renderer.setClearColor( 0x000000, 0 ); // the default
+renderer.autoClear = false;
+scene.background = null;
+document.getElementById("CanvasDiv").appendChild(renderer.domElement);
+
+// Globe geometry and material
+const globeGeometry = new THREE.SphereGeometry(5, 64, 64); // High detail sphere
+const globeMaterial = new THREE.MeshStandardMaterial({
+    map: new THREE.TextureLoader().load('images/2024-12-15-news.png') // Replace with your texture URL or local path
+});
+const globe = new THREE.Mesh(globeGeometry, globeMaterial);
+scene.add(globe);
+
+// Lighting
+const ambientLight = new THREE.AmbientLight(0x404040); // Soft white light
+scene.add(ambientLight);
+
+const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+directionalLight.position.set(5, 3, 7).normalize();
+scene.add(directionalLight);
+
+// Camera position
+camera.position.z = 14;
+camera.position.y = -3;
+
+// Animation loop
+function animate() {
+    requestAnimationFrame(animate);
+
+    // Rotate the globe around the Y-axis
+    globe.rotation.y += 0.005;
+
+    renderer.render(scene, camera);
+}
+
+animate();
+
+// Handle window resizing
+window.addEventListener('resize', () => {
+    camera.aspect = (window.innerWidth - 10) / (0.7 * window.innerHeight); // Updated aspect ratio
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth - 10, 0.7 * window.innerHeight); // Reduced height to 40% of the viewport height
+});
+</script>
+
+</body>
+</html>  
\ No newline at end of file
