<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Beach View & Location Capture</title>
<style>
@import url('[Link]
family=Poppins:wght@400;600&display=swap');
body, html {
margin: 0; padding: 0; height: 100%;
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #70e1f5, #ffd194);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
color: #333;
overflow-x: hidden;
min-height: 100vh;
}
header {
width: 100%;
padding: 1.5rem 2rem;
background: rgba(255 255 255 / 0.85);
box-shadow: 0 2px 6px rgb(0 0 0 / 0.1);
text-align: center;
font-weight: 600;
font-size: 1.8rem;
letter-spacing: 1.5px;
color: #f58a07;
text-shadow: 1px 1px 3px #7c4b00;
}
main {
max-width: 600px;
width: 90vw;
background: rgba(255 255 255 / 0.95);
box-shadow: 0 10px 24px rgb(0 0 0 / 0.13);
border-radius: 12px;
margin: 2rem auto 3rem;
padding: 1rem 1.5rem 2rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
}
[Link] {
width: 100%;
max-height: 320px;
object-fit: cover;
border-radius: 12px;
box-shadow: 0 6px 18px rgb(0 0 0 / 0.14);
margin-bottom: 1.2rem;
user-select: none;
}
video, canvas {
max-width: 100%;
border-radius: 12px;
box-shadow: 0 6px 18px rgb(0 0 0 / 0.14);
margin-top: 1rem;
}
#location-display {
margin-top: 1rem;
font-size: 1rem;
background: #e0f7fa;
padding: 1rem;
border-radius: 10px;
width: 100%;
word-wrap: break-word;
box-shadow: inset 0 0 5px rgb(0 0 0 / 0.1);
color: #00796b;
}
#status {
margin-top: 0.6rem;
font-weight: 500;
color: #c62828;
min-height: 1.4rem;
}
button#download-btn {
margin-top: 1.8rem;
background: #f58a07;
border: none;
color: white;
padding: 0.7rem 1.2rem;
border-radius: 12px;
font-weight: 600;
font-size: 1.1rem;
cursor: pointer;
transition: background-color 0.3s ease;
box-shadow: 0 4px 10px rgb(245 138 7 / 0.6);
}
button#download-btn:hover {
background: #d66e00;
box-shadow: 0 6px 14px rgb(214 110 0 / 0.8);
}
footer {
text-align: center;
color: #555;
font-size: 0.9rem;
padding-bottom: 1rem;
}
</style>
</head>
<body>
<header>
Beach & Location Capture
</header>
<main>
<img class="beach" src="[Link]
46273834b3fb?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Beach Image" />
<div id="status">Requesting location and camera access...</div>
<div id="location-display"></div>
<video id="video" autoplay playsinline style="display:none;"></video>
<canvas id="canvas" style="display:none;"></canvas>
<img id="captured-photo" alt="Captured front camera photo" style="display:none;
margin-top:1rem; border-radius:12px; box-shadow: 0 6px 18px rgba(0,0,0,0.14);"/>
<button id="download-btn" style="display:none;">Download Photo & Location
Info</button>
</main>
<footer>
© 2024 Beach & Location Capture
</footer>
<script>
const statusEl = [Link]('status');
const locationEl = [Link]('location-display');
const video = [Link]('video');
const canvas = [Link]('canvas');
const photo = [Link]('captured-photo');
const downloadBtn = [Link]('download-btn');
let userLocation = null;
let photoDataUrl = null;
function showStatus(message, isError = false) {
[Link] = message;
if (isError) {
[Link] = '#c62828';
} else {
[Link] = '#333';
}
}
// Get user's geographic location
function getLocation() {
if (![Link]) {
showStatus('Geolocation is not supported by your browser.', true);
return [Link]('No geolocation support');
}
return new Promise((resolve, reject) => {
[Link](
(pos) => {
userLocation = {
latitude: [Link],
longitude: [Link],
accuracy: [Link],
timestamp: [Link]
};
[Link] = `Latitude: $
{[Link](6)}, Longitude: ${[Link](6)}
(Accuracy: ±${[Link]}m)`;
showStatus('Location acquired.');
resolve(userLocation);
},
(err) => {
showStatus('Failed to get location: ' + [Link], true);
reject(err);
},
{ enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
);
});
}
// Start front camera and take photo
async function capturePhoto() {
if (![Link] || ![Link]) {
showStatus('Camera access is not supported by this browser.', true);
return [Link]('No camera support');
}
try {
// Prefer front camera if available
const constraints = {
video: {
facingMode: 'user',
width: { ideal: 640 },
height: { ideal: 480 }
},
audio: false
};
const stream = await [Link](constraints);
[Link] = stream;
[Link] = 'block';
// Wait a bit for camera to adjust
await new Promise(res => setTimeout(res, 1500));
// Draw image from video to canvas
[Link] = [Link];
[Link] = [Link];
const ctx = [Link]('2d');
[Link](video, 0, 0);
// Stop video stream tracks
[Link]().forEach(track => [Link]());
[Link] = 'none';
// Get photo data URL
photoDataUrl = [Link]('image/png');
[Link] = photoDataUrl;
[Link] = 'block';
showStatus('Photo captured successfully!');
[Link] = 'inline-block';
} catch (error) {
showStatus('Camera error: ' + [Link], true);
}
}
// Prepare and download combined data as JSON file
function downloadData() {
if (!photoDataUrl || !userLocation) {
alert('Photo or location data not available.');
return;
}
// Create JSON data
const data = {
location: userLocation,
photo: photoDataUrl
};
const dataStr = "data:text/json;charset=utf-8," +
encodeURIComponent([Link](data, null, 2));
const dlAnchorElem = [Link]('a');
[Link]("href", dataStr);
[Link]("download", "photo_location_data.json");
[Link](dlAnchorElem);
[Link]();
[Link]();
}
async function init() {
try {
await getLocation();
await capturePhoto();
} catch (error) {
[Link](error);
}
}
[Link]('click', downloadData);
// Start process after page load
[Link]('load', () => {
init();
});
</script>
</body>
</html>