Try on

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Try On Sunglasses</title>
<style>
#container {
position: relative;
max-width: 100%;
}

#user-photo {
max-width: 100%;
}

#selected-sunglasses {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
</style>
</head>
<body>
<h1>Try On Sunglasses</h1>
<div id="container">
<img id="user-photo" src="path_to_default_user_photo.jpg" alt="User's Photo">
<img id="selected-sunglasses" src="" alt="Selected Sunglasses">
</div>
<input type="file" id="upload-photo" accept="image/*">
<select id="sunglasses-list">
<option value="path_to_sunglasses_1.png">Sunglasses 1</option>
<option value="path_to_sunglasses_2.png">Sunglasses 2</option>

</select>

<script>
const userPhoto = document.getElementById('user-photo');
const selectedSunglasses = document.getElementById('selected-sunglasses');
const uploadPhotoInput = document.getElementById('upload-photo');
const sunglassesList = document.getElementById('sunglasses-list');

uploadPhotoInput.addEventListener('change', (event) => {
const file = event.target.files[0];
if (file) {
userPhoto.src = URL.createObjectURL(file);
}
});

sunglassesList.addEventListener('change', (event) => {
const selectedSunglassesPath = event.target.value;
selectedSunglasses.src = selectedSunglassesPath;
});
</script>
</body>
</html>