-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path2025-2-23-news.html
127 lines (115 loc) · 5.14 KB
/
2025-2-23-news.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
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.2), rgba(000,000,000,0.2)), url('images/2025-2-23-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>2025-02-23</h1>
</div>
<div class="content">
<!-- back - link to go to index.html-->
<a href="index.html">Back</a>
</div>
<div class="newsText">
<p>Here are the news headlines summarized into one sentence per category:</br></br>**US & Canada**: The US West Coast and Texas are dealing with various crises, including devastating beach fires, measles outbreaks, and unclear progress from President Trump on his campaign promises.</br></br>**Technology**: Companies like Tesla are pushing self-driving technology, but concerns about safety and scams targeting people with financial transactions are also making headlines.</br></br>**World News**: Global politics are heating up with controversy over land reform policies in South Africa, voter funding claims involving Trump in India, and Argentina's attempt to improve business ties with Elon Musk.</p>
</div>
<div class="hideDiv">
<p><i> A dramatic image of a polluted LA beach with hazmat suits littered amidst toxic debris, contrasting with a sleek, futuristic cityscape in the background where a self-driving Tesla taxi speeds by, unaware of the chaos on the left side of the image, while in the foreground a concerned-looking Trump looks on at a large map of South Africa and India. </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/2025-2-23-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>