<!DOCTYPE html>
<html>
<head>
<title>CloudFront Content Display</title>
</head>
<body>
<h1>Content from CloudFront Requests</h1>
<div id="content1">Loading data1.txt...</div>
<div id="content2">Loading data2.json...</div>
<div id="content3">Loading image.jpg...</div>
<script>
const cloudfrontDomain = “www.abudoy.com”; // Replace with your domain
// Request 1: data1.txt
fetch(`${cloudfrontDomain}/data1.txt`)
.then(response => response.text())
.then(data => {
document.getElementById('content1').innerText = `Data 1: ${data}`;
})
.catch(error => console.error('Error fetching data1.txt:', error));
// Request 2: data2.json
fetch(`${cloudfrontDomain}/data2.json`)
.then(response => response.json())
.then(data => {
document.getElementById('content2').innerText = `Data 2: ${JSON.stringify(data, null, 2)}`;
})
.catch(error => console.error('Error fetching data2.json:', error));
// Request 3: image.jpg
const imgElement = document.createElement('img');
imgElement.src = `${cloudfrontDomain}/image.jpg`;
imgElement.alt = "Sample Image";
document.getElementById('content3').innerHTML = ''; // Clear loading message
document.getElementById('content3').appendChild(imgElement);
</script>
</body>
</html>