Adding Image 2024-11-20-news.html - 1639

fr3qu3ncy · Nov 20, 2024 · fe5118f · fe5118f
1 parent 6c0d865
commit fe5118f
Showing 1 changed file with 95 additions and 0 deletions.
diff --git a/2024-11-20-news.html b/2024-11-20-news.html
@@ -0,0 +1,95 @@
+<!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: 90%;
+            padding: 20px;
+            box-sizing: border-box;
+            background-color: #000;
+            color: #fff;
+            font-size: x-small;
+        }
+        h1 { text-align: center; margin-bottom: 20px; }
+        .newsText {
+            font-size: x-small;
+        }
+        .hideDiv {
+            display: none;
+            font-size: x-small;
+        }
+        .newsText:hover + .hideDiv {
+            display: flex;
+        }
+    </style>
+</head>
+<body>
+    <div class="content">
+        <h1>2024-11-20</h1>
+    </div>
+    <div class="newsText">
+        <p>Here are the summaries of the current news headlines on the BBC website:</br></br>1. **Deadly bomb cyclone cuts power for thousands in US north-west**: A low-pressure storm system known as a bomb cyclone is causing widespread power outages and disruptions in the US north-west.</br>2. **Ukraine front could 'collapse' as Russia gains accelerate, experts warn**: Ukrainian soldiers are facing a growing threat from Russian forces, with some experts warning that the Ukrainian front could collapse.</br>3. **Diddy faces more than two dozen lawsuits as he sits in jail**: Rapper and entrepreneur Sean "Diddy" Combs is facing numerous lawsuits while serving time in prison for financial crimes.</br></br>These headlines give you an idea of the current news stories being reported on the BBC website.</p>
+    </div>
+    <div class="hideDiv">
+        <p><i> "A devastating storm system, a bomb cyclone, rages across the US north-west, knocking out power for thousands, as Ukrainian soldiers face a crumbling front line against Russian forces, while in a dark prison cell, rapper Diddy's empire crumbles under a mountain of lawsuits." </i></p>
+    </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 - 100) / (0.67 * window.innerHeight), 0.1, 1000); // Updated aspect ratio
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setSize(window.innerWidth - 10, 0.7 * window.innerHeight); // Reduced height to 40% of the viewport height
+document.body.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-11-20-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 = 15;
+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>