<!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>