Spaces:
Running
Running
File size: 2,094 Bytes
ca3f429 20428d9 ca3f429 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<!DOCTYPE html>
<html>
<head>
<title>Photo Score App</title>
<style>
body {background-color:#f2f2f2;font-family:Arial,sans-serif;color:#333;}
h1 {text-align:center;font-size:2em;margin-top:30px;color:#4CAF50;}
form {margin:50px auto;padding:20px;background-color:#fff;border-radius:10px;
box-shadow:0 0 10px #888;width:400px;display:flex;flex-direction:column;align-items:center;}
label {font-size:1.2em;margin-top:10px;color:#555;}
input[type="file"] {margin-top:10px;font-size:1.2em;padding:10px;border:none;
background-color:#eee;border-radius:5px;width:80%;}
button {margin-top:20px;font-size:1.2em;padding:10px;border:none;background-color:#4CAF50;
color:#fff;border-radius:5px;cursor:pointer;transition:background-color 0.3s;}
button:hover {background-color:#3e8e41;}
#best-photo {max-width:400px;max-height:400px;margin-top:50px;display:block;
border-radius:10px;box-shadow:0 0 10px #888;}
h2 {margin-top:30px;font-size:1.8em;color:#4CAF50;}
</style>
</head>
<body>
<h1>Photo Score App</h1>
<form method="POST" action="" enctype="multipart/form-data">
<label for="photo1">Photo 1:</label>
<input type="file" name="photo1" id="photo1">
<label for="photo2">Photo 2:</label>
<input type="file" name="photo2" id="photo2">
<button type="submit" name="submit">Find Best Photo</button>
</form>
<div>
<h2>Best Photo:</h2>
<img src="" id="best-photo">
</div>
<script>
function calculateScore(photo) {return Math.floor(Math.random() * 10) + 1;}
function comparePhotos(photo1, photo2) {
let score1 = calculateScore(photo1);
let score2 = calculateScore(photo2);
return (score1 > score2) ? photo1 : photo2;
}
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
let photo1 = document.querySelector('#photo1').files[0];
let photo2 = document.querySelector('#photo2').files[0];
let bestPhoto = comparePhotos(photo1, photo2);
let bestPhotoUrl = URL.createObjectURL(bestPhoto);
document.querySelector('#best-photo').src = bestPhotoUrl;
});
</script>
</body>
</html>
|