55 lines
1.4 KiB
HTML
55 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Your Game</title>
|
|
</head>
|
|
<style>
|
|
#cameraContainer {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
#cameraButton {
|
|
background-color: #0074d9;
|
|
color: #fff;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#uploadedImage {
|
|
max-width: 100%;
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div id="cameraContainer">
|
|
<input type="file" accept="image/*" capture="camera" id="cameraInput" style="display: none;">
|
|
<img id="uploadedImage" src="" alt="Uploaded Image">
|
|
<button id="cameraButton">Take a Picture</button>
|
|
</div>
|
|
<!-- Add your game content here -->
|
|
</body>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const cameraInput = document.getElementById("cameraInput");
|
|
const uploadedImage = document.getElementById("uploadedImage");
|
|
const cameraButton = document.getElementById("cameraButton");
|
|
|
|
// When the camera button is clicked, open the camera
|
|
cameraButton.addEventListener("click", function () {
|
|
cameraInput.click();
|
|
});
|
|
|
|
// When a photo is selected, display it in the image element
|
|
cameraInput.addEventListener("change", function () {
|
|
const file = cameraInput.files[0];
|
|
if (file) {
|
|
const imageUrl = URL.createObjectURL(file);
|
|
uploadedImage.src = imageUrl;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</html>
|