<!DOCTYPE html>
<html>
<head>
<title>Private Photo Gallery</title>
<style>
body{
background:#111;
color:white;
font-family:Arial;
text-align:center;
}
#gallery{
display:none;
margin-top:20px;
}
.gallery{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
}
.gallery img{
width:300px;
border-radius:8px;
}
</style>
<script>
function checkPasscode(){
let passcode="henry";
let entered=document.getElementById("passcode").value;
if(entered===passcode){
document.getElementById("login").style.display="none";
document.getElementById("gallery").style.display="block";
}else{
alert("Incorrect passcode");
}
}
</script>
</head>
<body>
<div id="login">
<h2>Enter Passcode</h2>
<input type="password" id="passcode">
<button onclick="checkPasscode()">Enter</button>
</div>
<div id="gallery">
<h1>Photo Gallery</h1>
<div class="gallery">
<img src="jack_photos/1stpool_4.26.25.JPG">
<img src="jack_photos/1stsolids_4.30.25.JPG">
<img src="jack_photos/bath_9.25.25.JPG">
<img src="jack_photos/greiders_8.23.25.JPG">
</div>
</div>
</body>
</html>