Spaces:
Running
Running
| <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> | |